flex弹性布局

flex弹性布局

 

采用flex布局的盒子称为：容器

所有子容器自动变成容器成员，也称之为flex项目

 

容器默认有两根轴，水平的主轴(main axis)和垂直的交叉轴(cross axis)

 

当开启flex布局后，flex项目会沿着主轴方向排列

 

容器属性

1.justify-content

  属性值:

   1.center:在主轴方向居中对齐

   2.flex-end:靠右对齐

   3.space-between:左右两端对齐，且项目中之间的距离相等

   4.sapce-around:项目之间的间距为左右两侧项目到容器间距的2倍

   5.sapce-evenly:项目之间的间距与 项目与容器间的间距相等

   6.flex-start:默认的 靠左对齐

2.align-items

 属性值:

   1.center:在交叉轴轴方向居中对齐

   2.flex-end:靠交叉轴底部终点对齐

   3.flex-start:交叉轴的起点对齐

 

3.flex-direction

  属性值：

   1.row 默认沿着主轴方向排列

   2.row-reverse 项目的排序反转

   3.column 沿着交叉轴方向排列

   4.column-reverse

 

4.flex-warp

 属性值：

 1.nowrap 默认不换行 当项目总宽度大于flex容器宽度，项目会强行等分容器且不换行

 2.wrap 换行 项目根据自身宽度进行排列，如果超出父容器宽度则自动换行

 

 项目属性

 1.order:用于决定项目排列顺序 数值越小排列越靠前

 2.flex 

 flex属性是flex-grow,flex-shrink,flex-basis的简写

 

 （1）flex-grow 用于决定项目在有剩余空间的情况下是否放大 默认0不放大 即：如果存在剩余空间，也不放大

 注意：即使设置了固定宽度，也会放大。假设默认三个项目中 前两个项目都是0 最后一个是1 最后的项目会

 占满剩余的所有空间

 

 （2）flex-shrink 默认1 用于决定项目在空间不足时是否缩小，默认项目都是1，即如果空间不足，所有项目将等比缩小

 注意：即使设置了固定宽度，也会缩小，但是如果某个项目的flex-shrink设置为0 即便空间不足，自身也不缩小

 

 （3）flex-basis:默认值为auto 用于设置项目宽度，

 默认为auto时，项目会保持默认宽度，或者以width为自身的宽度

 但是如果设置了flex-basis 权重比width属性高，因为会覆盖width属性

 flex-basis:80px;

 widht:60rpx;

 项目的宽度以flex-basis属性为准

 

 3.align-self:某个项目单独排列（center flex-end）