挂屏笔记 复习 CSS 弹性盒子模型

父级开启弹性盒子模型：

display：flex

排列方向：

flex-direction:row/row-reverse/column/column-reverse

主轴布局：

justify-content:center/flex-start/flex-end/space-between/space-around/space-evenly

副轴布局：

align-items:center/flex-start/flex-end

多行排列：

align-content：center/flex-start/flex-end/stretch

是否换行：

flex-wrap：wrap/nowrap

align-content：

用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

子级配置：flex 是 flex-grow、flex-shrink、flex-basis 三个属性的简写，具体如下：

flex-grow：必填，设置项目相对于其他项目的增长量，默认为 0；
flex-shrink：选填，设置项目相对于其他项目的收缩量，默认为 1；
flex-basis：选填，项目的长度，可设为: auto(默认值，自动)、inherit（从父元素继承该属性值） 或以具体值加 "%"、"px"、"em" 等单位形式。

flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。