By Leaf
在前端的学习过程中，布局可以说是非常重要的，之前一直用DIV和CSS布局，但是深受定位、浮动等属性的困扰。后来学习了flex布局才发现，只要熟悉flex布局，大部分复杂的网页都可以用flex布局实现。这里主要是将之前学习的flex知识加以复习和巩固，便于自己以后忘记查阅。
一、简单理解flex布局
首先我们来理解一下flex布局的一些基本概念(图是我从网上找来的，我觉得对理解flex布局很有用)：
image.png
任何一个容器都可以指定为flex布局
- 在flex容器中有两条轴线：水平轴线（main axis）和垂直轴线(cross axis)。我们可以通过设置决定我们布局的主轴方向，一般默认主轴为水平轴线。
- flex容器中每一个项目单元都称为flex item,每一个flex item所占的主轴空间为main size。cross size则为flex item的垂直空间（或称交叉轴空间）。
任何一个容器都可以指定为flex布局，任何容器耶必须先指定flex布局display:flex才能使用flex布局的所有属性。
flex的属性有：
-
flex-direction: row | row-reverse | column | column-reverse;确定主轴方向 -
flex-wrap:nowrap | wrap | wrap-reverse;允许项目是否换行 -
justify-content:flex-start | flex-end | center |space-between | space-around;确定项目在主轴的对齐方式 -
align-items:flex-start | flex-end | center | baseline | stretch;确定项目在交叉轴方向的对齐方式 -
align-content:flex-start | flex-end | center | space-between | space-around | stretch;确定多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用。
接下来对每一个属性和属性值展开demo：
<!--demo，html代码-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局</title>
<style>
*{
padding: 0;
margin: 0;
}
.container div {
width: 100px;
height: 100px;
border: 1px solid red;
}
.container{
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
- flex-direction 确定主轴方向
flex-direction: row | row-reverse | column | column-reverse
-
flex-direction:row;确定主轴方向为水平方向,起点在左端。
.container{
display: flex;
flex-direction: row;
}
image.png
-
flex-direction:row-reverse;确定主轴方向为水平方向,起点在右端。
.container{
display: flex;
flex-direction: row-reverse;
}
image.png
-
flex-direction:column;确定主轴方向为垂直方向,起点在上端。
.container{
display: flex;
flex-direction: column;
}
image.png
-
flex-direction:column-reverse;确定主轴方向为垂直方向,起点在下端。
.container{
display: flex;
flex-direction: column-reverse;
}
image.png
- flex-wrap 允许项目是否换行
flex-wrap:nowrap | wrap | wrap-reverse;
-
flex-wrap:nowrap;当容器的主轴固定，而空间不足的时候，项目flex-item会随着调整，不会换到下一行。
.container{
width: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
image.png
-
flex-wrap:wrap;当容器的主轴固定，而空间不足的时候，项目flex-item会随着调整，换到下一行。
.container{
width: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
image.png
- justify-content确定项目在主轴方向的对齐方式
justify-content：flex-start | flex-end | center | space-between | space-around
-
jusity-content:flex-start;确定项目在主轴方向的对齐方式:左对齐（这里主轴设置主轴是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
image.png
-
jusity-content:flex-end;确定项目在主轴方向的对齐方式:右对齐（这里主轴设置主轴是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
image.png
-
jusity-content:flex-center;确定项目在主轴方向的对齐方式:居中对齐（这里主轴设置主轴是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
image.png
-
jusity-content:fspace-between;确定项目在主轴方向的对齐方式:两端对齐，项目之间的间隔相等，即剩余空间等分成间隙（这里主轴设置主轴是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
image.png
-
jusity-content:space-around;确定项目在主轴方向的对齐方式:每个项目两侧的间隔相等（这里主轴设置主轴是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
image.png
-
jusity-content:space-evenly;确定项目在主轴方向的对齐方式:：项目均匀分布，所有项目之间及项目与边框之间距离相等（这里主轴设置主轴是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
image.png
综上所诉,
justify-content确定项目在主轴方向的对齐方式的大图如下（图是我在学习的过程中在网上看到的，这个图一目了然，很容易理解）：
image.png
- align-items确定项目在交叉轴方向的对齐方式。
align-items:flex-start | flex-end | center | baseline | stretch;
为了效果明显，我们要修改div的样式，给每一个div设置分别高度20px、40px、60px、80px。
.container div {
width: 100px;
}
.container div:nth-of-type(1) {
height: 20px;
border: 1px solid red;
}
.container div:nth-of-type(2) {
height: 40px;
border: 1px solid blue;
}
.container div:nth-of-type(3) {
height: 60px;
border: 1px solid rgb(255, 0, 157);
}
.container div:nth-of-type(4) {
height: 80px;
border: 1px solid green;
}
-
align-item:flex-start;确定项目在交叉轴方向的对齐方式
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
image.png
-
align-item:flex-end;确定项目在交叉轴方向的对齐方式
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
}
image.png
-
align-item:center;确定项目在交叉轴方向的对齐方式:以交叉轴的中点对齐
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 300px;
border: 1px solid black;
align-items: center;
}
image.png
-
align-item:baseline;确定项目在交叉轴方向的对齐方式:以第一行文字为基线对齐
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 300px;
border: 1px solid black;
align-items: baseline;
}
image.png
-
align-item: stretch;如果项目flex-item没有设置高度,而容器设置了高度，则项目会默认充满整个容器。
假设容器高度设置为 300px，而项目都没有设置高度的情况下，则项目的高度也为 300px。
.container div {
width: 100px;
}
.container div:nth-of-type(1) {
/* height: 20px; */
border: 1px solid red;
}
.container div:nth-of-type(2) {
/* height: 40px; */
border: 1px solid blue;
}
.container div:nth-of-type(3) {
/* height: 60px; */
border: 1px solid rgb(255, 0, 157);
}
.container div:nth-of-type(4) {
/* height: 80px; */
border: 1px solid green;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 300px;
border: 1px solid black;
align-items: stretch;
}
image.png
综上所述：
image.png
- align-content确定了在交叉轴方向的对齐方式及额外空间分配，类似于主轴上justify-content的作用。
align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
image.png
image.png
在这里献上几位大神对flex布局的讲解，因为有了他们的深入讲解，我才理解了flex布局，这里根据学到知识自己整合了一下，便于自己以后忘记查阅，若有错别之处，望大神之处，比心，感谢。
30分钟学会flex布局
flex-弹性布局原来如此简单
flex小技巧
flex快速上手小记
（图好像没放好，等我有空再整理）
