很多大牛,都提到了flex布局,说是css快速布局的新利器。于是学习了一下。

教程,我推荐阮一峰老师的文章。老师分别写了Flex 布局教程:语法篇Flex 布局教程:实例篇。我跟着老师的文章,动手做了几个实例,体会了一下flex布局,简直是太方便了。


flex容器属性:

  • flex-direction:决定元素的排列方向
  • flex-wrap:决定元素如何换行(排列不下时)
  • flex-flow flex-directionflex-wrap的简写
  • justify-content:元素在主轴上的对齐方式
  • align-items:元素在交叉轴的对齐方式

flex-direction: columns其实是将默认情况下的row,逆时针旋转90度。

flex元素属性:

  • flex-grow:当有多余空间时,元素的放大比例
  • flex-shrink:当空间不足时,元素的缩小比例
  • flex-basis:元素在主轴上占据的空间
  • flexgrow、shrink、basis的简写
  • order:定义元素的排列顺序
  • align-self:定义元素自身的交叉轴对齐方式

####Demo1
实现flex item的各种居中、对齐、位置:

html骨架结构:

1
2
3
<div class="box">
<span class="item"></span>
</div>
1
2
3
4
5
6
7
8
9
10
.box{
display: flex;
height: 300px;
}
.item{
background: #000;
width: 50px;
height: 50px;
border-radius: 50px;
}

初始化后是这样的:

如果我想让黑色的圆垂直居中的话,我就这样写了:

1
2
3
4
5
6
7
8
9
10
11
12
13
.box{
display: flex;
height: 300px;
justify-content: center;
align-items: center;

}
.item{
background: #000;
width: 50px;
height: 50px;
border-radius: 50px;
}

####Demo2

多个黑色的球:

html结构:

1
2
3
4
5
<div class="box">
<span class="item one"></span>
<span class="item two"></span>
<span class="item three"></span>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.box{
display: flex;
height: 300px;

}
.item{
background: #000;
width: 50px;
height: 50px;
border-radius: 50px;
}
.one{

}
.two{

}
.three{

}

默认情况下:

当css改变:

1
2
3
4
5
.box{
display: flex;
justify-content: space-between;
height: 300px;
}

球将均匀分开(和上面的一样):

如果再改变下主轴方向flex-direction:column;

再弄个斜对角:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.box{
display: flex;
justify-content: space-between;
height: 300px;
flex-direction:column;
}
.item{
background: #000;
width: 50px;
height: 50px;
border-radius: 50px;
}
.one{
/* align-self: flex-start; 其实是默认的 */
}
.two{
align-self:center;
}
.three{
align-self:flex-end;

}

####Demo3-网格布局
网格大概是这种的:

html结构:

1
2
3
4
5
6
<div class="grid">
<div class="grid-cell">111</div>
<div class="grid-cell">222</div>
<div class="grid-cell">333</div>
<div class="grid-cell">444</div>
</div>

css:

1
2
3
4
5
6
7
8
9
.gird{
display: flex;
display: -webkit-flex;

}
.grid-cell{
flex: 1;
border: 1px solid #000;
}

出来的效果是这样的:

然后更改项目的flex配比,可以获得不同的空间。

html:

1
2
3
4
5
6
<div class="grid">
<div class="grid-cell" id="one">111</div>
<div class="grid-cell" id="two">222</div>
<div class="grid-cell" id="three">333</div>
<div class="grid-cell" id="four">444</div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
#one{
flex: 1;
}
#two{
flex: 2;
}
#three{
flex: 3;
}
#four{
flex: 4;
}

flex:0; 其实代表着宽高auto,自适应。如果flex: a b c; a值是空间配比,b值是缩小的比例(若为0,则不缩放),c值是宽度(width) 或 高度(height)

实战:

一、手机页面

二、圣杯布局

MDN官方圣杯示例

二、产品列表

三、PC页面布局

四、完美居中

资料:一劳永逸的搞定 flex 布局&version=12020510&nettype=WIFI&fontScale=100&pass_ticket=%2BSBoJPwi2t8B7iYV9WC6%2BYFk%2B%2Fqog7%2FSEAhrxbvVxkeXjlzhYSzcd0iXHEsx74n8)