【CSS】flex弹性布局(伸缩布局)

1 flex布局

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

在父盒子：

display:flex

设置了flex后float就失效了，但是定位仍然可以使用。

2 常见父元素属性

2.1 flex-direction

设置主轴方向（子元素是跟着主轴来排列的）

flex-direction 属性指定了弹性子元素在父容器中的位置。

flex-direction:column

参数	描述
row(默认)	从左到右
row-reverse	从右到左
column	从上到下
row-column	从下到上

2.2 justify-content

设置主轴上的子元素排列方式

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

参数	描述
flex-start	（默认值）位于弹性盒子的开头
flex-end	位于弹性盒子的末尾
center	位于弹性盒子的中间
space-between	位于各行之间留有空白的内容中 两边贴死
space-around	位于各行之间、之内、之外留有的空白 两边不贴死

2.3 flex-wrap

子元素是否换行

参数	描述
nowrap	（默认值）不换行
wrap	溢出时换行或者换列
wrap-reverse	反转 wrap 排列

2.4 align-items

设置侧轴上的子元素排列方式（单行）

参数	描述
stretch	（默认值）子元素被拉伸适应容器
center	位于容器的中心
flex-start	位于开头
flex-end	位于结尾
baseline	位于容器的基线上

2.5 align-content

设置侧轴上的子元素排列方式（多行），只能用于元素出现换行的情况

参数	描述
stretch	（默认值）子元素被拉伸适应容器
center	位于容器的中心
flex-start	位于开头
flex-end	位于结尾
space-between	位于各行之间留有空白的容器
space-around	位于各行之前之后之间留有空白的容器

2.6 flex-flow

复合属性
flex-flow:设置主轴方向 是否换行

flex-flow: column wrap;

3 常见子元素属性

3.1 flex

值为数值，默认是0，定义子元素分配”剩余空间“，用flex来表示占多少份

剩余空间只指排除有宽度的盒子占的空间，其余的空间就叫剩余空间

flex:0（1、2、3...）

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

3.2 align-self

自己在侧轴上的排列方式

参数	描述
auto	（默认值）元素继承它的父容器align-items属性 如果没有父容器则为stretch 拉伸
​stretch	元素被拉伸适应容器
center	元素位于容器的中心
flex-start	元素位于容器的开头
​flex-end	元素位于容器的结尾

3.3 order

定义元素的排列顺序，数字（默认是0）（可以为负数），数值越小，排列越靠前

3.4 flex-grow

用于设置或检索弹性盒的扩展比率

• number 默认是0
• 设置为2的话相当于占两个元素的大小

3.5 flex-shrink

用于设置或检索弹性盒的收缩比率

• number 默认值是1

3.6 flex-basis

用于设置或检索弹性盒伸缩基准值

• auto 默认值
• ​number 可以设置长度或者百分比