Flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，比较适合小规模的布局，移动端基本都是使用flex布局
Flex布局的本质
flex布局实质上是一套属性的组合，有的属性是设置在父元素上，有的属性设置在子元素上（大概12个属性，六个在父元素上，六个在子元素上），然后通过这12个属性来实现整体布局
此时的父元素我们称之为flex容器，子元素我们称之为flex项目
基本概述
一旦一个元素设置为了flex类型，那么其所有的子元素都会被flex方式影响
定义父元素为flex布局容器，父元素是块状元素
.box{
display: flex;
}
定义父元素为flex布局容器，父元素是行内元素
.box{
display: inline-flex;
}
注意：设为Flex布局以后，直接子元素的float、clear和vertical-align属性将失效
主轴与交叉轴
- 一个盒子被设置为flex布局后，它默认会存在两种轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
- 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end
- 交叉轴的开始位置叫做cross start，结束位置叫做cross end
- 子元素默认沿主轴排列（即默认水平排列）
- 单个子元素占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
Flex布局–设置在父元素上的属性
①主轴的方向 flex-direction
主轴的方向（即子元素的排列方向，因为子元素默认沿主轴排列）
此属性有4个值，如下：
| 属性值 | 描述 |
|---|---|
| column-reverse | 主轴为垂直方向，起点在下沿 |
| column | 主轴为垂直方向，起点在上沿 |
| row（默认值） | 主轴为水平方向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在右端 |
②Flex子项是否换行 flex-wrap
此属性有3个值，如下：
| 属性值 | 描述 |
|---|---|
| nowrap（默认） | 不换行 |
| wrap | 换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
③flex-direction/flex-wrap的简写 flex-flow
flex-direction属性和flex-wrap属性的简写形式
此属性有2个值，默认值为row nowrap，如下：
flex-flow:row nowrap;
row代表的是flex-direction的默认值row
nowrap代表的是flex-wrap的默认值nowrap
④flex子项在主轴上的对齐方式 justify-content
子元素水平对齐方式，在主轴上的对齐方式（随着主轴方向的改变而改变）
此属性有5个值，其属性如下：
| 属性值 | 描述 |
|---|---|
| flex-start（默认值） | 左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等(所以，项目之间的间隔比项目与边框的间隔大一倍) |
⑤flex子项在交叉轴上的对齐方式 align-items
子元素垂直对齐方式，子元素在交叉轴上如何对齐
此属性有2个值，如下：
| 属性值 | 描述 |
|---|---|
| flex-start | 让子元素在交叉轴的开始处对齐 |
| flex-end | 让子元素在交叉轴的结束处对齐 |
| center | 让子元素在交叉轴的中点对齐 |
| baseline: | 让子元素在第一行文字的基线对齐 |
| stretch（默认值） | 【如果子元素未设置高度或设为auto，将占满整个容器的高度】 |
⑥多条主轴在交叉轴上的对齐方式 align-content
多条主轴在交叉轴上的对齐方式（多行内容垂直对齐方式） 多根主轴在交叉轴线上的对齐方式 如果项目只有一根主轴线，该属性不起作用
此属性有6个值，如下：
| 属性值 | 描述 |
|---|---|
| flex-start | 在交叉轴的开始处对齐 |
| flex-end | 在交叉轴的结束处对齐 |
| center： | 在交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等(所以，轴线之间的间隔比轴线与边框的间隔大一倍) |
| stretch（默认值） | 轴线占满整个交叉轴 |
Flex布局–设置在子元素上的属性
①定义子元素的排列顺序 order
数值越小，排列越靠前，默认为0，可以为负值
②定义子元素在主轴的放大比例，前提是存在剩下空间用于放大 flex-grow
该属性来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间【默认为0，表示不放大】
flex-grow–放大说明
(1) 如果所有子元素的flex-grow属性都为相等，则将会平分父元素剩余宽度
(2) 如果不相等，将会用父元素的宽度减去剩余未放大的子元素的宽度，剩余值将按照比例平分
(3) flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害
举个例子:
父元素宽400px，有两子元素：A和B。A宽为100px，B宽为200px
则空余空间为 400-（100+200）= 100px
如果A，B都不索取剩余空间，则有100px的空余空间
如果A索取剩余空间:设置flex-grow为1，B不索取。则最终A的大小为 自身宽度（100px）+ 剩余空间的宽度（100px）= 200px
如果A，B都设索取剩余空间，A设置flex-grow为1，B设置flex-grow为2。则最终A的大小为 自身宽度（100px）+ A获得的剩余空间的宽度（100px * (1/(1+2))）,最终B的大小为 自身宽度（200px）+ B获得的剩余空间的宽度（100px * (2/(1+2))）
③定义了子元素的缩小比例 flex-shrink
前提是空间无法装下盒子大小，默认为1，即如果空间不足，该子元素将缩小。负值对该属性无效
flex-shrink–缩小说明
(1) 该属性来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。
(2) flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。
(3) flex-shrink的值越大，减小的越厉害。如果值为0，表示不减小
举个例子:
父元素宽400px，有两子元素：A和B。A宽为200px，B宽为300px
则A，B总共超出父元素的宽度为(200+300)- 400 = 100px
如果A，B都不减小宽度，即都设置flex-shrink为0，则会有100px的宽度超出父元素。
如果A不减小宽度:设置flex-shrink为0，B减小。则最终B的大小为 自身宽度(300px)- 总共超出父元素的宽度(100px)= 200px
如果A，B都减小宽度，A设置flex-shirk为3，B设置flex-shirk为2。则
最终A的大小为 自身宽度(200px)- A减小的宽度(100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px,
最终B的大小为 自身宽度(300px)- B减小的宽度(100px * (300px * 2/(200 * 3 + 300 * 2))) = 250px
④定义了在分配多余空间之前，子元素占据的主轴空间 flex-basis
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则子元素将占据固定空间。如果子元素上同时设置了在主轴方向上的width/height和flex-basis,那么flex-basis会覆盖width/height的值
⑤flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写 flex flex
flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写
默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
⑤控制单个元素在交叉轴上的对齐方式 align-self
align-self属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性（还有五个值写法和align-items一样）默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
注意事项
(1) 子项可以设置高度，宽度最好用flex-basis属性设置
(2) 一个元素可以既是容器，又是子项，可以同时具备容器和子项的操作属性
(3) 容器本身可以设置浮动等，容器子项不能设置浮动定位等，但是子项的子元素又可以设置
(4) 使用flex布局有点类似于安卓的布局方式，先是很多行，然后每行有很多内容在进行控制
扫一扫
4588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
