CSS: Flex 弹性布局

注意

弹性元素是 container直接的在文档流中的子元素
container在文档流中的子元素才是弹性子元素
弹性元素的默认宽高为内容宽高

方向

flex-direction: row|row-reverse|column|column-reverse

container内的排列顺序: 从左往右 从右往左 从上往下 从小往上(都是从container对应方向边缘开始)

flex-wrap: nowrap|wrap|wrap-reverse

flex-flow:<'flex-direction'>||<'flex-wrap'>相当于flex-direction和flex-wrap的缩写

order: <integer>
initial: 0

两个黄色元素没有设置order, 默认为0

弹性

设置弹性元素默认宽/高:

flex-basis: <height>|<width>
设置的是宽还是高根据主轴来定, 如果主轴是行则设置默认宽度, 如果主轴是列则设置默认高度

设置多余空间分配给元素的比例

flex-grow: <integer>
initial: 0

弹性元素的宽或高计算:
flex-basis + flow-grow/sum(flow-grow)*remain

设置超出的空间(负值), 分配给元素的比例

flex-shrink: <integer>
initial: 1

弹性元素的宽或高计算:
flex-basis + flow-shrink/sum(flow-shrink)*remain
这里的remain是负值, 表示超出的内容大小

简写

flex: <flex-grow> || <flex-shrink> || <flex-basis>
initial: 0 1 main-size(main-size元素沿主轴方向默认尺寸)

对齐

主轴上的对齐方式:

justify-content: flex-start | flex-end | center | space-between | space-around
效果依次如下:

辅轴上的对齐方式:

align-items: flex-start | flex-end | center | stretch | baseline

设置单个flex item在cross-axis(辅轴)方向上对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch
initial: auto

设置辅轴方向上行对齐方式

当多行时: 应用于行
align-content: flex-start | flex-end | center | space-between | space-around | stretch