Css的flex布局(弹性盒子)详解

Css的flex(弹性)布局详解

​ 相信Css的弹性盒子大家都不陌生，在平时中也有很多地方会用到它，最近随着学习的慢慢深入，发现css的弹性盒子用的越来越多，而这个词对于我的印象还停留在学习css的时候，当时并没有过多的去了解它，现在才发现，css的弹性盒子是多么的重要，所以这次写下这个博客来恶补

初始css弹性布局

​ flex布局就是flexble box的缩写，也就是弹性布局

​ 所有元素都可以使用弹性布局(块级，行级)

​ flex属性大多时候是添加到父级元素上，添加了flex属性的父级元素的弹性子元素呈行排列(跟添加浮动同一行排列一样)

    

        

        

        

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

然后来了解下flex的一些属性

flex-direction

决定主轴的方向，也就是弹性子元素的排列方向

flex-direction:row //主轴是水平方向，起点在左边。也就是从左往右排(默认的是这个)
flex-direction:row-reverse //主轴是水平，起点在右边
flex-direction:column //主轴是垂直方向,起点在上沿
flex-direction:column-reverse //主轴是垂直方向，起点在下沿
1
2
3
4

flex-wrap

让弹性元素在必要时候进行拆分

flex-wrap: wrap; //自动换行
flex-wrap: nowrap;  //不换行，平均挤压
1
2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

当我们给父元素设置宽高后，假如子元素的宽度导致他们不能在同一行排列，添加了flex-wrap的话，元素就会自动换行,如下

而添加的是flex-nowarp的话

我们可以发现元素被挤压到同一行去显示

align-content

子元素垂直排列的方式，根据父元素来的

align-content:center //主轴在中间，也就是垂直居中
align-content：flex-start //主轴在父元素的顶部
align-content:flex-end  //主轴在父元素的底部
align-content:space-around //上下中均留边距
align-content:between //紧贴上下边距
1
2
3
4
5

justify-content

子元素的水平排列方式,与垂直类似

justify-content:center
justify-content：flex-start
justify-content:flex-end
justify-content:space-around
justify-content:between
1
2
3
4
5

align-items

与justify-content有点像，但是align-items主要是垂直方向的对齐方式

	 	flex-start：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴起始边界。
		flex-end：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴结束边界。
		center：弹性盒子元素在该行的（Y）轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两
1
2
3

弹性盒子的好处

优点显而易见，非常的容易和方便，对一块元素进行操作，很容易达到某个布局效果，

缺点也有，就是兼容性的问题，只支持ie9以上。

总得来说，弹性盒子对于当今而言，用的是越来越多，早日掌握这个对以后的学习有很大的帮助