CSS-弹性布局

    弹性布局对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性在响应式开发中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置flex项目，默认是水平方向。
侧轴：与主轴垂直的轴称为侧轴，默认是垂直方向的。
方向：默认主轴从左向右，侧轴默认从上到下。
主轴和侧轴并不是固定不变的，通过设置flex-direction可以互换。

容器的属性

• flex-direction

决定主轴方向

image.png

• flex-wrap

如果一条轴线排不下，如何换行
nowrap（默认）:不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

• flex-flow

是flex-direction和flex-wrap属性的简写形式

• justify-content

对齐方式

image.png

• align-items

设置交叉轴如何对齐

image.png

• align-content

多根轴线的对齐方式

image.png

看图说话，以行为单位，不看行内元素，看各行

image.png

元素的属性

• order

设置元素的排列顺序，数值越小，排列越靠前，默认为0

• flex-grow

定义元素的放大比例，默认为0，即如果存在剩余空间，也不放大

• flex-shrink

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

• flex-basis

在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
通过设置flex的数值来实现对元素之间几等分的设置，一个盒子里面可以有子元素不设置这个属性，可以设置固定宽度，这样剩下的盒子就把剩余宽度按照几等分来进行划分

• align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;