主軸和縱軸

對某一盒子模型添加display: flex;屬性后，稱之為 Flexible Box 模型（或稱之為 flexbox），即彈性盒子模型，簡稱彈性盒子。

彈性盒子為子元素提供了強大的空間分布和對齊能力。彈性盒子擁有兩根軸線，分別為主軸和交叉軸（縱軸）。主軸是沿著彈性盒子的頭到尾的軸線，交叉軸是垂直于主軸的軸線。

容器屬性

容器屬性是只作用于彈性盒子的屬性，對其子元素無效。

flex-direction

flex-direction 可以改變彈性盒子的子元素的排列方式。默認子元素都以主軸的開始位置進行排列。

flex-direction 的值為 column 時，即彈性盒子的子元素都以交叉軸的開始位置進行排列。

flex-wrap

彈性盒子的子元素超過可承受的最大寬度時，子元素的寬度將被縮小。

flex-wrap 默不換行，若希望子元素隨著彈性盒子寬度的變化而自動換行，可以將屬性的值設(shè)置為 wrap。

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的簡寫，接受的值分別對應 flex-direction 、 flex-wrap。

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

<style>
.demo {
    width: 150px;
    display: flex;
    flex-flow: row wrap;
}

.item {
    width: 80px;
    height: 50px;
    background-color: red;
}
</style>

兩個子元素的總寬度為 160px，大于彈性盒子的總寬度 150px。由于彈性盒子的容器屬性 flex-flow 為 wrap，所以，彈性盒子的子元素換行排列。

元素屬性

元素屬性是只作用于彈性盒子的子元素，對彈性盒子無效。

flex-grow

flex-grow 指的是讓彈性盒子的某一個子元素可以分配到剩余空間的系數(shù)。

<div class="demo">
    <div class="item-1 item"></div>
    <div class="item-2 item"></div>
</div>

<style>
.demo {
    height: 50px;
    display: flex;
}

.item-1 {
    flex-grow: 1;
    background-color: red;
}

.item-2 {
    flex-grow: 2;
    background-color: rgb(4, 123, 221);
}
</style>

div.item-2 的屬性 flex-grow 的值為 2，如圖所示，紅色部分分配的空間會比藍色分配得多一些。

flex-basis

flex-basis 指的是讓彈性盒子的某一個子元素沿著主軸方向的固定寬度。默認根據(jù)子元素的內(nèi)容來分配固定寬度。

<div class="demo">
    <div class="item-1 item">Hello World！</div>
    <div class="item-2 item">Hello CSS！</div>
</div>

<style>
.demo {
    display: flex;
}

.item-1 {
    flex-basis: 200px;
    background-color: red;
}

/* 設(shè)置flex-basis為200px */
.item-2 {
    background-color: rgb(4, 123, 221);
}
</style>

div.item-1 的 flex-basis 指定為 200px，不同于 div.item-2 由內(nèi)容來分配寬度。

flex-shrink

當彈性盒子在進行伸縮操作時，其所有子元素會根據(jù)瀏覽器的大小，等比例地縮小寬度。其中一個子元素擁有 flex-shrink 屬性時，在伸縮過程中，值越大，被忽略的優(yōu)先度越高。

<div class="demo">
    <div class="item-1 item"></div>
    <div class="item-2 item"></div>
    <div class="item-3 item"></div>
</div>

<style>
.demo {
    height: 50px;
    display: flex;
}

.item-1 {
    flex-shrink: 1;
    width: 50px;
    background-color: red;
}

.item-2 {
    flex-shrink: 2;
    width: 100px;
    background-color: rgb(4, 123, 221);
}

.item-3 {
    flex-shrink: 3;
    width: 150px;
    background-color: rgb(22, 236, 226);
}
</style>

item-1 的 flex-shirnk 值為1，item-2 和 item-3 依此為基礎(chǔ)遞增。在發(fā)生伸縮時，彈性盒子的子元素伸縮的規(guī)則結(jié)果為，flex-shrink 的值越大，也就是權(quán)重越高，元素就越先被忽略。

flex

flex 是 flex-grow、flex-shrink、flex-basis的簡寫。flex 只有一個值時，相當于 flex-grow，有兩個值時，相當于 flex-shrink，以此類推。

作用于交叉軸

以下屬性可以改變彈性盒子的子元素在交叉軸上的排列位置。

align-self

彈性盒子的子元素高度不一致時，默認所有子元素都排在彈性盒子的最頂端，即交叉軸的開始位置。

align-self 屬性只作用于子元素，它可以改變子元素在彈性盒子交叉軸的上、中、下的排列位置。可以接受 stretch、center、start、end 四個值。

<div class="demo">
    <div class="item-1 item"></div>
    <div class="item-2 item"></div>
</div>

<style>
.demo {
    height: 50px;
    display: flex;
}

/* align-self為center */
.item-1 {
    align-self: center;
    width: 50px;
    height: 30px;
    background-color: red;
}

.item-2 {
    width: 100px;
    background-color: rgb(4, 123, 221);
}
</style>

在不設(shè)置 align-self 為 center 時，默認 div.item-1 元素沿著彈性盒子交叉軸軸最頂端排列。

設(shè)置 align-self 為 center 之后，div.item-1 元素沿著彈性盒子交叉軸中心位置排列。

align-items

align-items 的作用于 align-self 相同，區(qū)別是，align-items 只作用于彈性盒子，而不作用于子元素。

<div class="demo">
    <div class="item-1 item"></div>
    <div class="item-2 item"></div>
</div>

<style>
/* align-items設(shè)置在彈性盒子上 */
.demo {
    height: 50px;
    display: flex;
    align-items: center;
}

.item-1 {
    width: 50px;
    height: 30px;
    background-color: red;
}

.item-2 {
    width: 100px;
    height: 40px;
    background-color: rgb(4, 123, 221);
}
</style>