给自己看的flex布局方法

Posted 2021-12-02 rmty

 

flex是flexiblebox的缩写，中文名字弹性盒子布局,在小程序布局中支持的很好

在试验之前可以看一下张鑫旭的flex https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

1.给父容器设置了display:flex;则内部容器的块状特性会自动消失(再给内部元素设置display:block无效):

2.设置flex-direction:column则其子元素为垂直排列(高度会自适应) ,

如果不设置flex-direction，则默认会设置成row(横向布局)

.

3.设置颠倒(所有元素对齐的方向也会改变，对于竖直排序的也一样):

4.justify-content:start/end 设置了子元素的对齐方向

 

 justify-content:center 设置子元素居中

 

 justify-content:space-between :平均分布

 

 justify-content:space-between :等距分布（1号元素与2号元素与3号元素左右的距离都相等）

垂直居中:

垂直水平居中:

5.主轴和交叉轴：

谁是主轴根据flex-direction来指定

row:水平方向是主轴

colmun:垂直方向的是主轴

justify-content指的是主轴上面的排列方式；

align-items指的是交叉轴上面的排列方式；

要下图的布局方式是对垂直方向的子元素的对齐方向改变，所以只需要justify-content的样式:

 

 

 

根据文字基线对齐

 

如果子元素的宽度大于父元素的宽度，又没有设置换行，则会自动调整子元素宽度

设置换行（设置高度可以消除与上边两个的间距）