1、flex布局与传统布局的区别
传统布局：
- 兼容性好但是布局繁琐
- 局限性，不能再移动端很好的布局
flex布局：
- 操作方便，布局简单，移动端应用广泛
- 但是IE11或更低版本不支持flex布局
使用范围：
1、如果是PC端页面布局，建议使用传统布局
2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局
2、flex布局原理
flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
flex布局注意事项
- 当我们为父盒子设为flex布局后，子元素的float、clear、和vertical-align属性都将会失效
- 伸缩布局 = 弹性布局 = flex布局
3、flex布局父项常见属性（设置在父元素上的属性）
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素的排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式(多行)
- align-items：设置侧轴上的子元素排列方式(单行)
- flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
3.1、flex-direction(设置主轴的方向)
在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。
| 属性值 | 说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
设置侧轴排列
.container {
display: flex;
width: 1200px;
height: 600px;
margin: 0 auto;
background-color:cornsilk;
/*设置为侧轴排列*/
flex-direction: column;
}
.container span {
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: cornflowerblue;
}
<div class="container">
<span>东</span>
<span>南</span>
<span>西</span>
<span>北</span>
</div>
效果图.png
3.2、justify-content(设置主轴上的子元素的排列方式)
justify-content属性定义了项目在主轴上的对齐方式，使用前必须确定好谁是主轴.
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从头部开始，如果主轴是X轴，则从左往右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐(如果主轴是X轴则水平居中) |
| space-around | 平分父级空间排列 |
| space-between | 先两边贴边，再去平分剩下的孔家排列 |
.flexStart {
display: flex;
width: 300px;
height:80px;
margin: 0 auto;
background-color:cornsilk;
/*设置子元素排列方式*/
justify-content: flex-start;
/*设置为侧轴排列*/
flex-direction: row;
}
.flexStart span {
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 1px;
background-color: blueviolet;
}
<div class="flexStart">
<span>东</span>
<span>南</span>
<span>西</span>
<span>北</span>
</div>
效果图示.png
3.3、flex-wrap(设置子元素是否换行)
默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
.wrapBefore {
display: flex;
width: 300px;
height: 80px;
margin: 0 auto;
background-color: cornsilk;
/*设置元素是否换行*/
flex-wrap: nowrap;
/*设置子元素排列方式*/
justify-content: space-between;
/*设置为侧轴排列*/
flex-direction: row;
}
.wrapAfter {
display: flex;
width: 300px;
height: 80px;
margin: 0 auto;
background-color: cornsilk;
/*设置元素是否换行*/
flex-wrap: wrap;
/*设置子元素排列方式*/
justify-content: space-between;
/*设置为侧轴排列*/
flex-direction: row;
}
.wrapBefore span, .wrapAfter span {
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 1px;
background-color: blueviolet;
}
<h3>换行前</h3>
<div class="wrapBefore">
<span>东</span>
<span>南</span>
<span>西</span>
<span>北</span>
<span>多的</span>
</div>
<h3>换行后</h3>
<div class="wrapAfter">
<span>东</span>
<span>南</span>
<span>西</span>
<span>北</span>
<span>多的</span>
</div>
效果.png
3.4、 align-items(设置侧轴上的子元素排列方式(单行))
align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸 |
.flexstart {
display: flex;
width: 300px;
height: 80px;
margin: 0 auto;
background-color: cornsilk;
/*设置子元素侧轴对齐方式*/
align-items: flex-start;
/*设置元素是否换行*/
flex-wrap: nowrap;
/*设置子元素排列方式*/
justify-content: space-between;
/*设置为侧轴排列*/
flex-direction: row;
}
.flexstart span, .flexEnd span, .center span {
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 1px;
background-color: blueviolet;
}
.stretch span {
width: 70px;
text-align: center;
line-height: 30px;
margin-right: 1px;
background-color: blueviolet;
}
<div class="flexstart">
<span>东</span>
<span>南</span>
<span>西</span>
<span>北</span>
</div>
效果.png
这里有个特别需要注意的点：在使用拉伸的时候，千万不能给子元素设置高度，否则它是无法进行拉伸的。
3.5、 align-content(设置侧轴上的子元素排列方式(多行))
设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子元素在侧轴上平分侧轴空间 |
| space-between | 子元素在侧轴上先分布在两头，再去平分剩余空间 |
| stretch | 设置子元素高度平分父级元素的高度 |
.flexstart {
display: flex;
width: 300px;
height: 200px;
margin: 0 auto;
background-color: cornsilk;
/*设置子元素侧轴对齐方式*/
align-content: flex-start;
/*设置元素是否换行*/
flex-wrap: wrap;
/*设置子元素排列方式*/
justify-content: space-between;
/*设置为侧轴排列*/
flex-direction: row;
}
.flexstart span {
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
margin-top: 1px;
margin-right: 1px;
background-color: blueviolet;
}
图1.png
图2.png
3.6、 flex-flow(设置主轴方向以及设置是否换行，一种复合写法)
flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow:row wrap; //主轴为x轴，并且换行
4、flex布局子项常见属性（设置在子元素上的属性）
flex布局中子元素也存在着相对应的一些属性
4.1、flex(子元素占的份数)
flex属性定义子元素分配剩余空间，用flex来表示占的多少份，默认为0
针对这个，可以先了解有名的CSS布局圣杯布局以及双飞翼布局,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。
.demo {
display: flex;
width: 60%;
height: 200px;
/*margin: 0 auto;*/
border: 1px solid darkblue;
background-color: azure;
}
.demo div:nth-child(1){
width: 100px;
height: 100%;
text-align: center;
line-height: 200px;
background-color: chocolate;
}
.demo div:nth-child(3){
width: 100px;
height: 100%;
text-align: center;
line-height: 200px;
background-color: chocolate;
}
.demo div:nth-child(2){
flex: 1;
height: 100%;
text-align: center;
line-height: 200px;
background-color: blueviolet;
}
<div class="demo">
<div>左侧</div>
<div>中间</div>
<div>右侧</div>
</div>
css平分剩余空间.gif
4.2、align-self(控制子元素自己在侧轴上的排列方式)
align-self属性允许单个的子元素与其他子元素不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch。
.demo {
display: flex;
width: 60%;
height: 200px;
margin: 0 auto;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
background-color:bisque;
}
.demo div {
width: 15%;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blueviolet;
}
.demo div:nth-child(2){
/*让第二个子元素flex-end排列*/
align-self: flex-end;
}
第二个子元素flex-end排列.png
4.3、order(控制子元素的排列顺序)
order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为0
.demo {
display: flex;
width: 60%;
height: 200px;
margin: 0 auto;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
background-color:bisque;
}
.demo div {
width: 15%;
height: 80px;
text-align: center;
line-height: 80px;
order: 2;
background-color: blueviolet;
}
.demo div:nth-child(2){
/*让第二个子元素flex-end排列*/
align-self: flex-end;
/*将第二个放前面去,order设置小即可*/
order: 1;
}
首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。
扫一扫
1413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
