flex布局

传统布局方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差；Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局

CSS3 弹性盒子是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列

父盒子添加 display:flex 形成了一个BFC

父项属性用于整体的布局；子项属性用于实现子项的差异化，内部调整

父盒子的常见属性

flex-direction

设置主轴方向

justify-content

设置元素在主轴上的排列方式

flex-direction只是说明主轴方向是怎样的，那边是起点

justify-content只是说明从起点开始排列还是怎么排列，只能改变整体的顺序，不能任意改变一个元素的顺序

这两父元素的属性只是宏观把控；它们并不能随意改变元素之间的顺序，想要修改顺序还得使用子元素的order属性

flex-wrap

子元素一行排不完是否换行

因为默认不换行，如果我们一行排不完，而且又不换行，它就会自动给我们盒子进行压缩，盒子宽度就会比原本设置的窄，盒子宽度为：父盒子宽度/子元素个数； 此时如果想要子盒子宽度为我们设置的宽度，就得设置换行

align-items

设置子元素在侧轴方向上的排列方式；前提是没有换行，只有一行（flex-warp:no-wrap）

了解下strech

align-content

设置子元素在侧轴上的配列方式；前提是多行

子盒子的常见属性

flex

作用：用于指定弹性子元素如何分配空间

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto

flex-grow：元素沿主轴方向的扩张尺寸，会占据主轴上的可用空间

放大比例，默认值为0，即就算存在剩余空间也不放大，如果所有子盒子数值为1的话就是所有项目等分剩余空间，如果有一个子盒子的flex-grow属性为2，其余都为1时，则前者占据的剩余空间是后者的两倍

flex-shrink ：元素沿主轴方向的收缩尺寸，只有在子元素总和超出主轴才会生效

按比例分配空间（默认为 1 ），收缩值为 flex-basis 基准乘以 flex-shrink 收缩比例

随着盒子越来越小，小的子元素最终会以 min-content 的大小进行铺设，后续空间会一直从大的子元素中移除

flex-basis：用于设置弹性盒伸缩基准值

默认值是auto

如果元素设置了宽度，flex-basis为设置的宽度

如果元素未设置宽度，flex-basis为元素内容的尺寸

flex-basis 属性优先于 width 属性；

设为 0 ，则子元素的大小不在空间分配计算的考虑之内

eg: 最后一个子元素想要占据所有的剩余空间

      .item1 {width: 200px;}.item2 {width: 30px;}.item3 {flex: 1;}

flex:1其实是 flex:1 1 auto的简写

eg: 子元素想要实现 1:2:1 分配

1
2
3
.item1 {flex: 1;background-color: pink;}.item2 {flex: 2;background-color: skyblue;}.item3 {flex: 1;background-color: greenyellow;}

flex:1 和 flex:auto 的区别

他们的flex-basis不一样，导致它们分配的剩余空间是不一样的；对于flex:1，flex-basis为0；设置了width也不会生效

1》flex:auto

相当于 flex:1 1 auto

• 在各元素初始宽度基础上，平均分配可用空间( 剩余空间 = 100% - 所有子元素的宽度; 然后分配剩余宽度给每个设置了这个属性的盒子)

2》flex:1

相当于 flex:1 1 0

• 在设置了flex属性的元素宽度为 0 的基础上，平均分配可用空间（把设置了这个属性的盒子的宽度直接当作0，剩余空间 = 100% - 没设置这个属性盒子的宽度，然后分配到每个设置了这个属性的盒子）

order

设置弹性盒子的子元素排列顺序

数值，默认值是0；数字越小，配列位置越靠前

展示顺序：item2 、item3、item1

      .item1 {width: 200px;order: 3;}.item2 {width: 30px;order: 1;}.item3 {order: 2;}

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性；属性值参考align-items

    
.box3 {display: flex;justify-content: space-between;width: 200px;height: 300px;border: 1px solid #000;}.item4,.item5,.item6 {width: 30px;height: 30px;border-radius: 50%;background-color: red;}.item5 {align-self: center;}.item6 {align-self: flex-end;}

利用这个属性实现三饼图：

浏览器兼容