CSS-flex弹性布局补充

1.order

<div class="box">

<div class="xbox">1</div>

<div class="xbox">2</div>

<div class="xbox" style="order: -1;">3</div>

order定义项目的排列顺序，值越小越靠前第一个值默认为0

<div class="xbox">4</div>

<div class="xbox">5</div>

<div class="xbox">6</div>

</div>

2.align-content

当设置flex-wrap：wrap（默认）时

出现换行后为多根轴线

align-content定义多根轴线的对齐方式

align-content: space-evenly;

3.水平处置居中

margin: 0 auto;(只能实现块元素的水平居中)

justify-content: center;主轴方向居中

align-items: center; 交叉轴方向居中

4.flex-grow

flex-grow定义项目的放大比例，默认为0，即使存在剩余空间也不放大。主要作用是分配剩余空间

flex-grow: 1;

表示把剩余的空间都充满

如果每个项目都设置flex-grow：1 那么每个项目会平均分配相同的宽度

5.flex-shrink

flex-shrink: 0;

flex-shrink用来表示是否被压缩，默认是1.表示被亚索，如果改成0则表示保持设置的尺寸，即不

被压缩

☆如果每个都不被压缩，则会超出父元素

6.flex-basis

flex-basis优先级比width高，同时设置只会展示basis的宽度

flex:flex-grow flex-shrink flex-basis

flex是复合属性，由上面三个属性组成