Flex弹性布局
Flex弹性布局
作为开发小白，写的第一篇博客，记录自己的学习，算是讲义，切勿直接复制粘贴，在写的过程中会忘记中英文切换，避免造成不必要的麻烦；如有问题，欢迎订正。谢谢。
在说Flex弹性布局前，先简单说下传统的布局，在未用弹性布局时，我们会通过用display、float、position等属性来达到效果，还有盒子模型；盒子模型需要提到box-sizing属性：
对于box-sizing属性值做下简单介绍：
content-box：这个属于普通盒子模型，之所以说普通，是因为当我们div这个元素添加padding、border等属性时,这个盒子会变大，向外扩展；（以div为例，div已经给过宽高）
border-box：相比于content-box对于我们的布局更友好，当我们给div这个元素添加padding、border等属性时,这个盒子不会变大，保持原有的大小，向内扩展；（以div为例，div已经给过宽高）
| 属性值 | 变化 |
|---|---|
| content-box | 盒子变大，向外扩展 |
| border-box | 盒子不变，向内扩展 |
现在开始说Flex弹性布局属性
首先从父元素开始说起：当我们开始使用弹性布局时，display:flex;属性一定要加，对于不同浏览器兼容问题，可以加上display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;解决兼容问题。
对于弹性盒子要说到主轴和交叉轴，后面会说到这个概念，为了有助于理解先贴一张图，主轴和交叉轴像数学里X轴与Y轴。
一、父元素
-
display:flex; 使用弹性布局时，display:flex;属性一定要加，对于不同浏览器兼容问题，可以加上display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;解决兼容问题。
-
justify-content：主轴上的子元素排列方式（该属性作用在主轴上，默认情况下主轴为X轴）；属性值有（该例子主轴为X轴）：
center：子元素居中显示
space-between：子元素两端对齐显示
space-around：子元素拉手显示（就像小孩在站队一样，手拉手站，最外面的两个小朋友具外围只有一个手臂宽，中间手拉手的部分是两个手臂的宽，说不清楚，还是图解吧！）
flex-start：子元素居左显示；
flex-end：子元素居右显示；
CSS部分：.child { width: 50px; height: 50px; background-color: #127078; border: 1px solid #111111; text-align: center; font-size: 20px; line-height: 50px; color: #ffffff; } .box { width: 300px; height: 300px; border:1px solid #000000; display: flex; justify-content: flex-end; }body部分：
1
2
3
- align-items：交叉轴上的子元素排列方式（该属性作用在交叉轴上，默认情况下主轴为X轴）；属性值有（该例子主轴为X轴）：
center：子元素在垂直方向上居中显示；
flex-start：子元素垂直方向上居上显示；
flex-end：子元素垂直方向上居下显示；
代码部分：
//CSS部分
.box {
width: 300px;
height: 300px;
border:1px solid #000000;
display: flex;
/* flex-direction: column; */
/* justify-content: flex-end; */
align-items: flex-end;
}
.child {
width: 50px;
height: 50px;
background-color: #127078;
border: 1px solid #111111;
text-align: center;
font-size: 20px;
line-height: 50px;
color: #ffffff;
}
//body部分：
1
2
3
- flex-direction：该属性是对子元素排列方式进行改变；也就是说主轴是X轴，还是Y轴；下面介绍一下主轴和交叉轴；
当flex-direction:row时，主轴为X轴，交叉轴为Y轴，一般flex-direction默认值为row，子元素横向排列，子元素是从左向右开始排列的；当flex-direction:row-reverse；时，主轴为X轴，交叉轴为Y轴，但是它与属性值row不同的是，子元素是从右向左开始排列的，如下图：
当flex-direction:column;时，主轴为Y轴，交叉轴为X轴，子元素纵向排列，从上向下开始排列的；当flex-direction:column-reverse;时，主轴为Y轴，交叉轴为X轴，但是它与属性值column不同的是，子元素是从下向上开始排列的；如下图：
注意:当flex-direction:column/column-reverse;时，justify-content就是作用在Y轴上啦，因为它是作用自主轴上的属性，用的时候要注意哦；当然align-items也改变了，此时它作用在X轴上；
代码部分：
//CSS部分
.box {
width: 300px;
height: 300px;
border:1px solid #000000;
display: flex;
flex-direction: column-reverse;
}
.child {
width: 50px;
height: 50px;
background-color: #127078;
border: 1px solid #111111;
text-align: center;
font-size: 20px;
line-height: 50px;
color: #ffffff;
}
//body部分
1
2
3
- flex-wrap:当子元素越来与多时，就会出现换行的问题，默认为不换行nowrap；
nowrap：不换行
wrap：换行（因为子元素加了border，为了不让border向外扩展，子元素样式加了：box-sizing:border-box;属性）
代码如下：
//CSS部分
.box {
width: 300px;
height: 300px;
border:1px solid #000000;
display: flex;
flex-wrap: wrap;
}
.child {
width: 50px;
height: 50px;
background-color: #127078;
border: 1px solid #111111;
text-align: center;
font-size: 20px;
line-height: 50px;
color: #ffffff;
box-sizing: border-box;
}
//body部分
1
2
3
4
5
6
7
8
- align-content:是对多行子元素，进行交叉轴上的排列；（该例子主轴为X轴）
center：居中
flex-start：居上
flex-end：居下
stretch：拉伸，是align-content的默认值；
代码部分：
//CSS部分
.box {
width: 300px;
height: 300px;
border:1px solid #000000;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.child {
width: 50px;
height: 50px;
background-color: #127078;
border: 1px solid #111111;
text-align: center;
font-size: 20px;
line-height: 50px;
color: #ffffff;
box-sizing: border-box;
}
//body部分
1
2
3
4
5
6
7
8
- flex-flow：这个属性是flex-direction和flex-wrap属性的简写；
例如：flex-flow: column wrap;等同于：flex-direction: column; flex-wrap: wrap;
到这里子元素的属性介绍完了，接下来介绍子元素的属性。
子元素
**flex:1;**该属性是子元素划分父元素的宽度，即：子元素占父元素的几分之几；举个例子：
.box {
width: 300px;
height: 300px;
border:1px solid #000000;
display: flex;
}
.child {
width: 50px;
height: 50px;
background-color: #127078;
border: 1px solid #111111;
text-align: center;
font-size: 20px;
line-height: 50px;
color: #ffffff;
box-sizing: border-box;
}
.item1{
flex:1;
}
.item2{
flex:2;
}
//body部分
1
2
该例子中的两个div的flex值分别为1、2，也就是说把父元素的宽分为三份，item1这个div占父元素宽的三分之一，item2这个div占父元素宽的三分之二；如图：
这里要注意一点：子元素在划分父元素宽度时，会先去除固定宽度；举个例子，假设div1不给它flex属性，div2和div3分别给它2,3；它会先去除div1和border这些固定宽度，然后再分配剩下的宽度；效果如下
flex-grow:1;定义子元素放大比例；默认值为0，即不放大；当多行元素时，最后一行会空缺，为了让它撑满宽度，就可以使用该属性进行放大；
代码部分：
//CSS部分
.box {
width: 300px;
height: 300px;
border:1px solid #000000;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.child {
width: 50px;
height: 50px;
background-color: #127078;
border: 1px solid #111111;
text-align: center;
font-size: 20px;
line-height: 50px;
color: #ffffff;
box-sizing: border-box;
flex-grow: 1;
}
//body部分
1
2
3
4
5
6
7
8
**align-self:flex-start/center/flex-end;**该属性用来覆盖父元素的align-items属性；如图：
代码部分：
//CSS部分
.box {
width: 300px;
height: 300px;
border:1px solid #000000;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.child {
width: 50px;
height: 50px;
background-color: #127078;
border: 1px solid #111111;
text-align: center;
font-size: 20px;
line-height: 50px;
color: #ffffff;
box-sizing: border-box;
flex-grow: 1;
}
.div1{
align-self: flex-start;
}
//body部分
1
2
3
4
5
6
7
8
order：规定子元素的顺序（排序），数值越小排的越靠前，默认值为0；
代码部分：
//CSS部分
.box {
width: 300px;
height: 300px;
border:1px solid #000000;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.child {
width: 50px;
height: 50px;
background-color: #127078;
border: 1px solid #111111;
text-align: center;
font-size: 20px;
line-height: 50px;
color: #ffffff;
box-sizing: border-box;
flex-grow: 1;
order: 1;
}
.div1{
order: 0;
}
//body部分
1
2
3
4
5
6
7
8
以上就是我的总结，如有不对的地方欢迎指正，如果没有看懂得，可以看看这个视频https://ke.qq.com/course/393322?taid=3111497647915114，很适合初学者，这是根据以上视频做的笔记。