css-17.flex布局

基本概念

flex容器

使用flex布局的元素，称为flex容器

其方式是将display属性设置为flex、inline-flex

flex项目

flex容器的子元素称为flex项目

flex容器的属性

display

• flex：容器为块级元素
• inline-flex：容器为行内元素

flex-direction

设置主轴的方向

属性值：row、row-reverse、column、column-reverse

默认值：row

flex-wrap

设置项目如何换行

属性值：wrap、wrap-reverse、nowrap

默认值：nowrap

justify-content

设置项目在主轴的对齐方式

属性值：flex-start、flex-end、center、space-between、space-around

默认值：flex-start

align-items

设置项目在交叉轴的对齐方式

属性值：flex-start、flex-end、center、stretch

默认值：stretch

align-content

设置多行项目在交叉轴的对齐方式

属性值：flex-start、flex-end、center、space-between、space-around、stretch

默认值：flex-start

flex项目的属性

order

设置项目在主轴的排列顺序。数值越小，越靠前。默认值为0

flex-grow

设置项目在主轴的放大比例

默认值为0，即不放大

flex-shrink

设置项目在主轴的缩小比例。

默认值为1，即空间不够时进行缩小