文章目录
flex布局1. 弹性盒基础2.flex布局父项属性1. 常见父容器属性2. flex-direction设置主轴方向⭐3. flex-wrap设置子元素是否换行⭐4.flex-flow5. justify-content 设置主轴上的子元素排列方式⭐6. align-items 设置侧轴上的子元素排列方式(单行)⭐7. align-content 设置侧轴上的子元素的排列方式（多行）8. align-content和align-items区别
3. flex布局子项属性1. 常见子项目属性2. flex-grow属性3. flex-shrink属性4. flex-basis属性5. flex复合属性⭐6. order属性7. align-self控制子项自己在侧轴上的排列方式
4. 总结
flex布局
CSS Flexible Box Module Level 1(简称flexbox，弹性盒，https://www.w3.org/TR/css-flexbox-1/)，它把以往艰巨的布局任务变得极为简单，例如很多类型的页面、小组件、应用和图库。有了弹性盒，通常不再需要使用CSS框架。
弹性盒是一种简单而强大的布局方式，我们通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。内容可以轻易横向或纵向排布，还可以沿一个轴布局，或者折断成多行。
弹性盒模型布局最突出的一个特点可能是，能让元素对不同的屏幕尺寸和不同的显示设备做好适应准备。弹性盒在响应式网站中表现极好，因为内容能根据可用空间的大小增减尺寸。
1. 弹性盒基础
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2.flex布局父项属性
1. 常见父容器属性
以下6个属性是对父元素设置的
flex-direction: 设置主轴的方向justify-content: 设置主轴上的子元素排列方式flex-wrap: 设置子元素是否换行align-content: 设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
2. flex-direction设置主轴方向⭐
主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
默认主轴方向是x轴方向，水平向右默认侧轴方向是y轴方向，水平向下
属性值
flex-direction 属性决定主轴的方向（即项目的排列方向）
注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
属性值说明row默认值，从左到右row-reverse从右到左column从上到下column-reverse从下到上
注意：之后的案例没有特别说明的情况下，只以flex-direction：row为主轴
3. flex-wrap设置子元素是否换行⭐
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的
属性值说明nowrap默认值，不换行，不改变侧轴方向wrap换行，不改变侧轴方向wrap-reverse换行，改变侧轴方向
4.flex-flow
flex-flow 属性是flex-direction 和flex-wrap属性的复合属性
flex-flow:
5. justify-content 设置主轴上的子元素排列方式⭐
justify-content 属性定义了项目在主轴上的对齐方式
注意： 使用这个属性之前一定要确定好主轴是哪个
属性值说明flex-start默认值，左对齐flex-end右对齐center主轴居中对齐space-between两端与边框贴边，再去平分剩余空白空间，项目之间间距相等space-around项目两侧间距相等，因此项目之间的距离是项目与边框之间距离的两倍space-evenly平分剩余空白空间，项目之间的距离是项目与边框之间距离相等
6. align-items 设置侧轴上的子元素排列方式(单行)⭐
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
属性值说明flex-start在侧轴的头部开始排列flex-end在侧轴尾部开始排列center在侧轴居中显示baseline弹性元素向基线对齐stretch拉伸（子项目不给高度时的默认值）
1
2
3
7. align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的
属性值说明flex-start默认值在侧轴的头部开始排列flex-end在侧轴的尾部开始排列center在侧轴居中显示space-between与主轴设置的效果一样，只是轴不同space-around与主轴设置的效果一样，只是轴不同space-evenly与主轴设置的效果一样，只是轴不同stretch设置子项目元素高度平分父元素高度
8. align-content和align-items区别
align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸align-content适应于换行(多行)的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。总结就是单行找align-items 多行找align-content
3. flex布局子项属性
1. 常见子项目属性
以下几个属性是对子项目设置的
flex-grow定义项目的放大比例flex-shrink定义项目的缩小比例flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）flex属性是上面三个属性的复合属性，一般不单写上面三个，而是使用复合属性order实行定义子项的排列顺序(前后顺序)align-self控制子项自己在侧轴的排列方式
2. flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow:
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为n，其他项目都为1，则前者占据的剩余空间将比其他项多n倍。
3. flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink:
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
注意：在计算过程中均将margin值和边框忽略，添加这两个值是为了方便观察
同时，如果所有弹性元素都允许缩小，缩减的量根据缩减因子按比例分配。这意味着，在同辈弹性元素中，缩减因子越大的弹性元素缩减量越大。如下：
计算过程：
父容器宽750px，子项目宽均为300px，“缺失的空间”为300*3 - 750 =150px,我们可知缩减因子总和为1+2+3 = 6，因此每一份缩减因子将减少150/6 = 25px，所以第一个子项目减少1 * 25 = 25px, 第二个子项目减少 2 * 25 = 50px, 第三个子项目减少 3 * 25 = 75px
缩小比例
=
缺失的空间
(
(
宽度
1
∗
缩减因子
1
)
+
.
.
.
+
(
宽度
N
∗
缩减因子
N
)
)
缩小比例 = \frac{缺失的空间}{((宽度1 * 缩减因子1) +...+ (宽度N * 缩减因子N))}
缩小比例=((宽度1∗缩减因子1)+...+(宽度N∗缩减因子N))缺失的空间
4. flex-basis属性
flex-basis属性定义了弹性元素的初始或默认尺寸，即根据增长因子和缩减因子分配多余或缺少的空间之前，弹性元素的大小。
.item {
flex-basis:content |
}
属性值说明content最长一行内容或最宽（或最高）在主轴上的长度length设置宽，高，项目将占据固定空间auto默认值 ，弹性基准为各自的width值
content
item {
/*最长一行内容或最宽（或最高）在主轴上的长度*/
flex-basis:content;
/*因为上面的优先级高于width所以忽略width值*/
width:300px;
height:80px;
}
效果如下:
注意：content这个属性值不会忽略flex-shink这个属性,如果设置flex-shink且内容太长，盒子会被缩小，但内容不会，所以内容会超出盒子，不经常使用。
item {
/*
未设置flex-basis值默认为auto
flex-basis:auto;
*/
flex-shink:1;
/*因为上面的优先级高于width所以忽略width值*/
width:300px;
height:80px;
}
.i1 {
/*第一个子项目遵守content属性值*/
flex-basis:content;
}
auto
效果如下：
item {
/*设置宽，高，项目将占据固定空间*/
flex-basis:auto;
height:80px;
}
.i1 {
width: 400px;
}
.i2 {
width: 200px;
}
.i3 {
width: 100px;
}
length
效果如下：
item {
/*设置宽，高，项目将占据固定空间*/
flex-basis:200px;
/*忽略width值*/
width:300px;
height:80px;
}
注意：
此属性值优先级高于本身的width和height属性，会忽略width值和height值。此属性不能忽略min-width、min-height、max-width和max-height。因此假如一个元素上声明了flex-basis:100px和min-width:400px，尽管弹性基准比最小宽度小，但还是以最小宽度为准。
5. flex复合属性⭐
用于设置一个元素的 flex-grow, flex-shrink, 和 flex-basis。这三个属性共同决定了元素如何在flex容器中增长、缩小和设置基础大小。
.item {
flex:
}
initial
initial是css中的全局关键字，任何属性都能使用这个关键字表示属性的初始值，即规范定义的默认值。因此，下面两个声明等效。
.item {
/*下面两行等效*/
flex:initial;
flex:0 1 auto;
}
案例如下：
.flex_container {
display: flex;
background-color: #ccc;
border: 2px solid black;
margin: 50px auto;
}
/*f1~f4代表从上到下4个容器*/
.f1,
.f3 {
width: 500px;
}
.f2,
.f4 {
width: 1000px;
}
.f3 .item,
.f4 .item {
width: 50px;
}
.item {
flex: initial;
/* 文字换行 */
word-break: break-word;
background-color: #78ec60;
border: 2px solid brown;
margin: 5px;
font-size: 30px;
text-align: center;
}
auto
flex:auto的效果和flex: initial类似，不过弹性元素的弹性变量是双向的；如果容器的空间放不下全部弹性元素，元素将缩小；如果有额外的空间，弹性元素将增大。主轴方向上的任何多余空间都将分给弹性元素。下面两个声明是等效的。
.item {
/*下面两行等效*/
flex:auto;
flex:1 1 auto;
}
案例如下：
.item {
/*仅改变这一行，其他与上述的flex: initial一致*/
flex: auto;
/* 文字换行 */
word-break: break-word;
background-color: #78ec60;
border: 2px solid brown;
margin: 5px;
font-size: 30px;
text-align: center;
}
none
声明了flex：none的弹性元素不具有弹性。弹性元素既不增大也不缩小。下面两个声明是等效的。
.item {
flex:none;
flex: 0 0 auto;
}
案例如下：
.item {
/*仅改变这一行，其他与上述的flex: initial一致*/
flex: none;
/* 文字换行 */
word-break: break-word;
background-color: #78ec60;
border: 2px solid brown;
margin: 5px;
font-size: 30px;
text-align: center;
}
length 数字值
如果flex属性只有一个值，而且是正数，那个值将用作增长因子，而缩减因子默认为0，基准也默认为0。下面两个声明是等效的。
.item {
flex:1;
felx:1 0 0;
}
此时，目标弹性元素具有弹性，即可以增大。而缩减因子是什么值都没有意义，因为弹性基准为0，弹性元素只能从哪个基准开始增大。
案例如下：
.f1 .item,
.f2 .item {
flex: 1;
}
.f3 .item:nth-child(1),
.f4 .item:nth-child(1),
.f5 .item:nth-child(1) {
flex: 0;
}
.f3 .item:nth-child(2),
.f4 .item:nth-child(2),
.f5 .item:nth-child(2) {
flex: 1;
}
.f3 .item:nth-child(3),
.f4 .item:nth-child(3),
.f5 .item:nth-child(3) {
flex: 2;
}
.f3 .item:nth-child(4),
.f4 .item:nth-child(4),
.f5 .item:nth-child(4) {
flex: 3;
}
.f3 .item:nth-child(5),
.f4 .item:nth-child(5),
.f5 .item:nth-child(5) {
flex: 4;
}
.f3 .item:nth-child(6),
.f4 .item:nth-child(6),
.f5 .item:nth-child(6) {
flex: 5;
}
注意：不建议通过flex-grow、flex-shink、flex-basis单个属性定义增长因子、缩减因子和基准，而是建议通过flex复合属性中统一定义，单个说明只是为了说明它的作用。
6. order属性
数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。
.item {
order:
}
案例如下：
注意：这只是视觉上的调整，弹性盒相关的属性不会改变屏幕阅读器对内容的读取顺序，如下方遍历元素所示，元素的遍历顺序依旧为1-9，而不是4,1,2,3,6,7,8,9,5
7. align-self控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
属性值说明auto默认值，继承父元素flex-start在侧轴的头部开始排列flex-end在侧轴尾部开始排列center在侧轴居中显示baseline弹性元素向基线对齐stretch拉伸
.i1 {
align-self: auto;
}
.i2 {
align-self: flex-start;
}
.i3 {
align-self: flex-end;
}
.i4 {
align-self: center;
}
.i5 {
align-self: baseline;
}
.i6 {
align-self: stretch;
}
4. 总结
这篇博客我结合了CSS权威指南，相关视频和其他博主的理解，如果有错误的地方还请指出。此外标题中带有⭐的是比较重要的，掌握后基本上就可以运用强大的flex布局了。