伸缩容器
概念：开启了flex的元素就是伸缩容器。
1、给元素设置
display: flex;或display: inline-flex;，该元素就变为了伸缩容器。
2、display: inline-flex;很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
3、一个元素可以同时是：伸缩容器、伸缩项目
伸缩项目
概念：伸缩容器所有子元素自动称为了伸缩项目。
1、仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
2、无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。
主轴与侧轴
主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右；
侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上向下。
主轴方向
属性名：flex-direction
常用值如下：
| 值 | 含义 |
|---|---|
row |
主轴方向水平从左到右---默认值 |
row-reverse |
主轴方向水平从右到左 |
column |
主轴方向水平从上到下 |
column-reverse |
主轴方向水平从下到上 |
注意：改变了主轴的方向，侧轴方向也随之改变。
主轴上的换行方式
属性名flex-wrap
| 值 | 含义 |
|---|---|
nowrap |
不换行---默认值 |
wrap |
自动换行，伸缩容器不够自动换行 |
wrap-reverse |
反向换行 |
flex-flow(了解)
flex-flow是一个复合属性，复合了flex-direction和flex-wrap两个属性，但没有顺序要求。
flex-flow: row wrap;
主轴上的对齐方式
属性名：justify-content
常用值：
| 值 | 含义 |
|---|---|
flex-start |
主轴起点对齐---默认值 |
flex-end |
主轴终点对齐 |
center |
居中对齐 |
space-between |
均匀分布，两端对齐 |
space-around |
均匀分布，两端距离是中间的一半 |
space-evenly |
均匀分布，两端和中间距离一致 |
侧轴对齐
1、侧轴对齐-单行情况
属性名：``align-items```
常用值：
| 值 | 含义 |
|---|---|
flex-start |
侧轴起点对齐 |
flex-end |
侧轴终点对齐 |
center |
侧轴中点对齐 |
baseline |
侧轴第一行文字的基线对齐 |
stretch |
如果伸缩项目未设置高度，将占满整个容器的高度---默认值 |
2、侧轴对齐-多行情况
属性名：align-content
常用值：
| 值 | 含义 |
|---|---|
flex-start |
与侧轴起点对齐 |
flex-end |
与侧轴轴终点对齐 |
center |
与侧轴中点对齐 |
space-between |
与侧轴两端对齐，中间平均分布 |
space-around |
伸缩项目间的距离相等，比距边缘的大一倍 |
space-evenly |
在侧轴上完全平分 |
stretch |
如果伸缩项目未设置高度，占满整个侧轴---默认值 |
元素水平垂直居中
方案一：
//父类
display: flex;
justify-content: center;
align-items: center;
方案二：
//父类
display: flex;
//子类
margin: auto;
基准长度
flex-basis：设置的主轴方向的基准长度，会让宽度或者高度失效，由基准长度替代。
备注：主轴横向，替代宽度；主轴纵向，替代高度。
作用：浏览器根据这个属性设置的值，计算主轴上是否多余空间，默认值是auto，即：伸缩项目的宽或高。
伸缩性
1、伸
flex-grow：定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸放大。
规则：
主轴如果有剩余空间，会根据
flex-grow值，进行分配，比如：三个伸缩项目值分别为1、2、3，那么分别会得到1/6、2/6、3/6的空间。
2、缩
flex-shrink：定义了项目的压缩比例，默认为1，即：如果空间不足，该项目将会缩小。
收缩项目的计算，如下：
三个收缩项目，宽度分别为
200px，300px，200px，flex-shrink值分别设置为1,2,3,目前容器宽度只有400px，还差300px，那么这样计算：
1、计算分母：（200*1）+ （300*2） + （200*3） = 1400
2、计算比例：
项目一：(200*1）/ 1400 = 比例值1
项目二：(300*2）/ 1400 = 比例值2
项目三：(200*3）/ 1400 = 比例值3
3、计算最终收缩大小：
项目一：比例1*300
项目二：比例2*300
项目三：比例3*300
原来瘦的人少出点血，原来胖的人多出点血
flex复合属性
flex复合属性：复合了：flex-grow、flex-shrink、flex-basis三个属性，默认值为0 1 auto。
如果写flex: 1 1 auto;，则可简写为：flex:auto;。
如果写flex: 1 1 0;，则可简写为：flex:1;。
如果写flex: 0 0 auto;，则可简写为：flex:none;。
如果写flex: 0 1 auto;，则可简写为：flex:0 auto;。---flex的初始值
项目排序
order属性定义项目的排序顺序，数值越小，排列越靠前，默认为0。
单独对齐
通过align-self属性，可以单独跳转某个伸缩项目的对齐方式。
默认值为auto，表示继承父元素的align-items属性。
网友评论