最实用的弹性布局flex

1 引言

作为后端工程师，学点布局知识还是很有必要的，因为这样即使没有前端工程师的辅助自己也能马马虎虎的开发自己的业余项目了。在前端布局中，有这么三种：表格布局、栅格布局、弹性布局，选择哪种布局，这个似项目而定吧，我们不能定义最好的布局，当可以选择最适合自己项目的布局。对于笔者而言，吾更偏爱弹性布局，吾觉得该布局使用起来更加灵活，所以，本次笔者记录的就是学习弹性布局flex的知识点，方便自己日后查阅，也希望可以帮助到正在学习布局的小伙伴，如记录有误，还望大家指出。

2 弹性盒布局

想要把一个元素定义为弹性盒模型的话，我们可以通过CSS的display属性来定义，如

<div class="flex-box">
	
</div>

.flex-box{
    display: flex;
}

这样我们就在class为flex-box的div定义为了弹性盒子，之后编写在盒子内的元素都会成为弹性元素，下面我们接着看几个比较实用的属性来操作弹性盒子

3 弹性盒属性

3.1 flex-direction

该属性定义弹性元素从哪一端开始布局

• row（默认值）  ：横向左端开始
• row-reverse       ：横右端开始
• column              ：纵向顶部开始

从横向左端开始布局

<div class="content">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

.content{
	display: flex;
	flex-direction: row;
	}
.item{
	border: 1px solid #808080;
	height: 100px;
	width: 25%;
	margin-bottom: 10px;
	border-radius: 10px;
	margin-right: 10px;
}

 

从纵向右端开始布局 

<div class="content">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

<style>
.content{
	display: flex;
	flex-direction: row-reverse;
	}
.item{
	border: 1px solid #808080;
	height: 100px;
	width: 25%;
	margin-bottom: 10px;
	border-radius: 10px;
	margin-right: 10px;
}
</style>

 

从纵向顶端开始布局

<div class="content">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

<style>
.content{
	display: flex;
	flex-direction: column;
	}
.item{
	border: 1px solid #808080;
	height: 100px;
	width: 25%;
	margin-bottom: 10px;
	border-radius: 10px;
	margin-right: 10px;
}
</style>

 

---

 

3.2 flex-wrap

1. nowrap           ：不换行
2. wrap               ：正向换行
3. wrap-reverse  ：反向换行

不换行 

 

<div class="content">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

 

<style>
.content{
	display: flex;
	flex-direction: column;
	flex-wrap:nowrap;
}
.item{
	border: 1px solid #808080;
	height: 100px;
	width: 25%;
	margin-bottom: 10px;
	border-radius: 10px;
	margin-right: 10px;
}
</style>

正向换行 

<div class="content">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

<style>
.content{
	display: flex;
	flex-direction: column;
	flex-wrap:wrap;
}
.item{
	border: 1px solid #808080;
	height: 100px;
	width: 25%;
	margin-bottom: 10px;
	border-radius: 10px;
	margin-right: 10px;
}
</style>

反向换行 

<div class="content">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

<style>
.content{
	display: flex;
	flex-direction: column;
	flex-wrap:wrap-wrap;
}
.item{
	border: 1px solid #808080;
	height: 100px;
	width: 25%;
	margin-bottom: 10px;
	border-radius: 10px;
	margin-right: 10px;
}
</style>

 

---

 

3.3 justify-content

• flex-start（默认值）：左对齐
• flex-end                   ：右对齐
• center                      ：居中对齐
• space-between        ：两端对齐
• space-around          ：两侧的间隔相等

左对齐 

右对齐 

居中对齐 

两端对齐 

两侧的间隔相等 

---

 

3.4 align-items

• flex-start               ：纵轴顶端对齐
• flex-end                ：纵轴底端对齐
• center                   ：纵轴中点对齐

 纵轴顶端对齐

纵轴顶端底端 

纵轴中心对齐