-
基本概念
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡(jiǎn)稱“容器”。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱“項(xiàng)目”。容器默認(rèn)存在兩根軸，分別為水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置叫做 main start，結(jié)束位置叫做 main end；交叉軸的開(kāi)始位置叫做 cross start，結(jié)束位置叫做 cross end。項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size，占據(jù)的交叉軸空間叫做 cross size。如下圖所示：
image.png
- 容器屬性
-
flex-direction
flex-direction 屬性用來(lái)決定主軸的方向（即項(xiàng)目的排列方向），屬性的可選值如下：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#main {
border: 1px solid #CCC;
padding: 5px;
position: relative;
}
.row, .row_reverse, .column, .column_reverse{
display: flex;
margin-bottom: 5px;
}
/* 橫向 /
.row {
flex-direction: row;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#main {
border: 1px solid #CCC;
padding: 5px;
position: relative;
}
.row, .row_reverse, .column, .column_reverse{
display: flex;
margin-bottom: 5px;
}
/ row言橫向從左到右 /
.row {
flex-direction: row;
}
/ row-reverse 主軸沿水平方向從右到左 /
.row_reverse {
flex-direction: row-reverse;
}
/ 垂直從上到下 /
.column {
flex-direction: column;
}
/ 垂直從下到上 */
.column_reverse {
flex-direction: column-reverse;
position: absolute;
top: 120px;
left: 400px;
}
.row div, .row_reverse div, .column div, .column_reverse div {
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main">
<div class="row">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="row_reverse">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="column">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="column_reverse">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</div>
</body>
</html>
.row_reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column_reverse {
flex-direction: column-reverse;
position: absolute;
top: 120px;
left: 400px;
}
.row div, .row_reverse div, .column div, .column_reverse div {
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main">
<div class="row">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
<div class="row_reverse">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="column">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="column_reverse">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</div>
</body>
</html>
- flex-wrap
flex-wrap 屬性用來(lái)設(shè)置當(dāng)彈性盒子的子元素（項(xiàng)目）超出父容器時(shí)是否換行，屬性的可選值如下：
值 描述
nowrap 默認(rèn)值，表示項(xiàng)目不會(huì)換行
wrap 表示項(xiàng)目會(huì)在需要時(shí)換行
wrap-reverse 表示項(xiàng)目會(huì)在需要時(shí)換行，但會(huì)以相反的順序
initial 將此屬性設(shè)置為屬性的默認(rèn)值
inherit 從父元素繼承屬性的值
- flex-flow
flex-flow 屬性是 flex-direction 和 flex-wrap 兩個(gè)屬性的簡(jiǎn)寫(xiě)，語(yǔ)法格式如下：
flex-flow: flex-direction flex-wrap; -
justify-content
justify-content 屬性用于設(shè)置彈性盒子中元素在主軸（橫軸）方向上的對(duì)齊方式，屬性的可選值如下：
image.png
image.png -
align-items
align-items 屬性用來(lái)設(shè)置彈性盒子中元素在側(cè)軸（縱軸）方向上的對(duì)齊方式，屬性的可選值如下：
image.png
