day12-弹性盒子

flex（弹性盒子、伸缩盒子）

---

是CSS中的又一个布局手段，主要用来代替浮动元素来完成页面的布局；
flex可使元素只有弹性，让元素可以跟随页面的大小改变而改变；

弹性容器

---

要使用弹性元素必须先讲一个元素设置为弹性容器；
通过display来设置弹性容器：

1. display:flex;设置为块级弹性容器；
   

2. display:inline-flex;设置为行内的弹性容器（相对用的少）
   

弹性元素

---

弹性容器的子元素是弹性元素（弹性项）；
弹性元素可以同时是弹性容器；
flex-direction 制定容器中弹性元素的排列：

可选值		主轴
row	默认值，弹性元素在容器中自左向右水平排列	自左向右
row-revese	弹性元素在容器中自右向左水平排列	自右向左
column	弹性元素在容器中自上而下纵向排列	自上而下
column-revese	弹性元素在容器中自下而上纵向排列	自下而上

主轴：
弹性元素的排列方向称为主轴；
侧轴：
与主轴垂直方向的称为侧轴；

弹性元素属性

flex-grow指定弹性元素的伸展系数

---

当父元素有多余的空间时，子元素如何伸展；
父元素的剩余空间，会按照比例进行分配；
flex-shrink指定弹性元素的收缩系数；

---

当父元素中的空间不足以收纳所有的子元素时，如何对子元素收缩；

弹性容器上的样式

flex-wrap

---

设置弹性元素是否在弹性元素中自动换行；

可选值
nowrap	默认值，元素在弹性容器中自动换行
wrap	元素沿着辅轴方向自动换行
wrap-rewerse	元素沿着辅轴反方向自动换行

flex-flow

---

wrap和direction的简写属性

justify-content

---

如何分配主轴上的空白空间（主轴上的元素如何排列）；

可选值
flex-start	元素沿着主轴起边排列
flex-end	元素沿着主轴终边排列
center	元素居中排列
space-around	空白分布到元素两侧
space-evenly	空白分布到元素的两侧
space-between	空白均匀分布到元素间

align-items

---

元素在辅轴上如何对齐（元素间的关系）；

可选值
stretch	默认值，将元素的长度设置为相同的值
flex-start	元素不会拉伸，沿着辅轴起边对齐
flex-end	元素不会拉伸，沿着辅轴的终边对齐
center	居中对齐
baseline	基线对齐（用的不多）

align-content

---

辅轴空白空间的分布

可选值
flex-start	元素沿着辅轴起边排列
flex-end	元素沿着辅轴终边排列
center	元素居中排列
space-around	空白分布到元素上下
space-evenly	空白分布到元素的上下
space-between	空白均匀分布到元素间

align-self

---

用来覆盖当前弹性元素的align-items

弹性元素上的样式

flex-grow

---

弹性的增长系数（按比例）

flex-shink

---

弹性的缩减系数（按比例）
计算方法比较复杂；
缩减多少事根据缩减系数和元素大小计算；

flex-basis

---

元素基础长度；
指定的是元素在主轴上的基础长度；
如果主轴是横向的，则该值指定的就是元素的宽度；
如果主轴是纵向的，则该值指定的就是元素的高度；
默认值是auto，表示了参考元素自身的高度或宽度；
如果传递了一个具体的数值，则以该值为准；

flex

---

可设置弹性元素所存的三个样式（按顺序）；
flex :增长 缩减 基础;

order

---

弹性元素的排列顺序；