flex布局意为弹性布局，任何一个容器都可以指定为flex布局，行内元素也可以使用flex布局
display:flex;
- 采用flex布局的元素称为flex容器，所有的子元素自动成为容器成员，成为flex项目（item）。
- 容器默认存在两根轴，水平的主轴，垂直的交叉轴。
-
容器的属性
- flex-direction
决定主轴的方向（即项目的排列方向）
div{ display:flex; flex-direction:row | row-reverse | column | column-reverse; } //row（默认值），主轴为水平方向，水平从左到右 //row-reverse，主轴为水平方向，水平从右向左 //column，主轴为垂直方向，从上向下 //column，主轴为垂直方向，从下往上- flex-wrap
如果一条轴线排不下，如何换行
div{ flex-wrap:nowrap | wrap | wrap-reverse; } //nowrap(默认值），不换行，也就是一行挤🙄 //wrap,换行，第一行在上方 //wrap-reverse,换行，第一行在下方- flex-flow
是
flex-direction和flex-wrap的简写形式，默认值为row nowrap.div{ flex-flow:<flex-direction> || <flex-wrap>; }- justify-content
定义了项目在主轴上的对齐方式（👉有点怪啊
div{ justify-content:flex-start | flex-end | center |space-between | space-around; } //flex-start(默认值），左对齐 //flex-end,右对齐 //center，居中 //space-between，两端对齐，项目之间的间隔相等 //space-aroud，每个项目两侧的间隔相等，所以项目之间的 间隔比项目与边框的间隔大一倍。- align-items
定义项目在交叉轴上如何对齐。
div{ align-items:flex-start | flex-end | center | baseling | stretch; } //flex-start,交叉轴的起点对齐，也就是上对齐 //flex-end，下对齐 //center，居中 //baseline，项目的第一行文字的基线对齐 //stretch（默认值），如果项目没有设置高度或者设置为auto， 将占满整个容器的高度。- align-content
定义了多根轴线（也就是有很多行的时候，这些行在垂直方向上如何对齐）如何对齐，如果只有一根轴线，不起作用。属性值和上面的一样。
-
项目的属性
- order
定义项目的排列顺序，数值越小，排列越靠前
- flex-grow
定义项目的放大比例，默认为0，也就是如果存在剩余空间，也不放大，1的话表示等分剩余空间
- flex-shrink
定义项目的缩小比例，默认为1，如果空间不足，那么项目等比例缩小
- flex-basis
定义了在分配多余空间之前，项目占据的主轴空间。默认为auto。
- flex
是flex-grow,flex-shrink,flex-basis的简写,默认值为
0 1 auto,后两个属性可选。flex-grow有两个快捷值，auto代表1 1 auto,none代表0 0 auto。- align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-items，默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则等同于stretch..item{ align-self:auto | flex-start | flex-end | center | baseline | stretch; }
