By Leaf
在前端的學(xué)習(xí)過程中，布局可以說是非常重要的，之前一直用DIV和CSS布局，但是深受定位、浮動等屬性的困擾。后來學(xué)習(xí)了flex布局才發(fā)現(xiàn)，只要熟悉flex布局，大部分復(fù)雜的網(wǎng)頁都可以用flex布局實現(xiàn)。這里主要是將之前學(xué)習(xí)的flex知識加以復(fù)習(xí)和鞏固，便于自己以后忘記查閱。
一、簡單理解flex布局
首先我們來理解一下flex布局的一些基本概念(圖是我從網(wǎng)上找來的，我覺得對理解flex布局很有用)：
image.png
任何一個容器都可以指定為flex布局
- 在flex容器中有兩條軸線：水平軸線（main axis）和垂直軸線(cross axis)。我們可以通過設(shè)置決定我們布局的主軸方向，一般默認(rèn)主軸為水平軸線。
- 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;當(dāng)容器的主軸固定，而空間不足的時候，項目flex-item會隨著調(diào)整，不會換到下一行。
.container{
width: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
image.png
-
flex-wrap:wrap;當(dāng)容器的主軸固定，而空間不足的時候，項目flex-item會隨著調(diào)整，換到下一行。
.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;確定項目在主軸方向的對齊方式:左對齊（這里主軸設(shè)置主軸是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
image.png
-
jusity-content:flex-end;確定項目在主軸方向的對齊方式:右對齊（這里主軸設(shè)置主軸是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
image.png
-
jusity-content:flex-center;確定項目在主軸方向的對齊方式:居中對齊（這里主軸設(shè)置主軸是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
image.png
-
jusity-content:fspace-between;確定項目在主軸方向的對齊方式:兩端對齊，項目之間的間隔相等，即剩余空間等分成間隙（這里主軸設(shè)置主軸是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
image.png
-
jusity-content:space-around;確定項目在主軸方向的對齊方式:每個項目兩側(cè)的間隔相等（這里主軸設(shè)置主軸是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
image.png
-
jusity-content:space-evenly;確定項目在主軸方向的對齊方式:：項目均勻分布，所有項目之間及項目與邊框之間距離相等（這里主軸設(shè)置主軸是水平方向：flex-direction:row;）
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
image.png
綜上所訴,
justify-content確定項目在主軸方向的對齊方式的大圖如下（圖是我在學(xué)習(xí)的過程中在網(wǎng)上看到的，這個圖一目了然，很容易理解）：
image.png
- align-items確定項目在交叉軸方向的對齊方式。
align-items:flex-start | flex-end | center | baseline | stretch;
為了效果明顯，我們要修改div的樣式，給每一個div設(shè)置分別高度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沒有設(shè)置高度,而容器設(shè)置了高度，則項目會默認(rèn)充滿整個容器。
假設(shè)容器高度設(shè)置為 300px，而項目都沒有設(shè)置高度的情況下，則項目的高度也為 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布局，這里根據(jù)學(xué)到知識自己整合了一下，便于自己以后忘記查閱，若有錯別之處，望大神之處，比心，感謝。
30分鐘學(xué)會flex布局
flex-彈性布局原來如此簡單
flex小技巧
flex快速上手小記
（圖好像沒放好，等我有空再整理）
