CSS中的flex弹性布局

Flex Terms

弹性容器
Flex Container

弹性容器 元素与轴 容器属性值

在文档流中的直接子元素才是在弹性元素

弹性元素 弹性布局 布局属性

方向flex-direction

方向 方向案例

换行flex-wrap

flex-wrap 换行样例

一次性设置两个属性（flex-direction/flex-wrap）

image.png

order顺序

默认情况order都是0，可以设置为负值，这是一个相对值，越小越在前。

order

弹性

弹性相关属性
flex-basis
flex-grow

弹性相关属性

flex-basis

main-size | <width>
main-size指的是主轴上的距离，可能是高度也可能是宽度
设置flex item的初始宽高

flex-grow

number 初始值为0

flex-grow flex-grow样例

flex-shrink

number 初始值为1

flex-shrink flex-shrink样例

flex

flex flex样例

对齐

对齐相关属性

对齐相关属性

justify-content

与text-align类似但是更加强大
flex-start | flex-end | center | space-between | space-around
flex-start前对齐
flex-end后对齐
center 居中对齐
space-between 平分空白空间
space-around 平分空白空间【包括首尾】

justify-content justify-content样例

align-items

设置辅轴上的对齐方式
类似于vertical-align，但是更强大

align-items align-items样例

align-self

设置单个flex item在辅轴上的对齐方式

和align-items类似，只不过align-items是在容器上设置的

align-self align-self样例

align-content

align-content

对于容器的元素出现了多行，并在容器中有剩余空间，就通过align-content设置

align-content align-content样例