主軸和縱軸
對(duì)某一盒子模型添加display: flex;
屬性后,稱之為 Flexible Box 模型(或稱之為 flexbox),即彈性盒子模型,簡(jiǎn)稱彈性盒子。
彈性盒子為子元素提供了強(qiáng)大的空間分布和對(duì)齊能力。彈性盒子擁有兩根軸線,分別為主軸和交叉軸(縱軸)。主軸是沿著彈性盒子的頭到尾的軸線,交叉軸是垂直于主軸的軸線。
容器屬性
容器屬性是只作用于彈性盒子的屬性,對(duì)其子元素?zé)o效。
flex-direction
flex-direction 可以改變彈性盒子的子元素的排列方式。默認(rèn)子元素都以主軸的開(kāi)始位置進(jìn)行排列。
flex-direction 的值為 column 時(shí),即彈性盒子的子元素都以交叉軸的開(kāi)始位置進(jìn)行排列。
flex-wrap
彈性盒子的子元素超過(guò)可承受的最大寬度時(shí),子元素的寬度將被縮小。
flex-wrap 默不換行,若希望子元素隨著彈性盒子寬度的變化而自動(dòng)換行,可以將屬性的值設(shè)置為 wrap。
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě),接受的值分別對(duì)應(yīng) 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>
兩個(gè)子元素的總寬度為 160px,大于彈性盒子的總寬度 150px。由于彈性盒子的容器屬性 flex-flow 為 wrap,所以,彈性盒子的子元素?fù)Q行排列。
元素屬性
元素屬性是只作用于彈性盒子的子元素,對(duì)彈性盒子無(wú)效。
flex-grow
flex-grow 指的是讓彈性盒子的某一個(gè)子元素可以分配到剩余空間的系數(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,如圖所示,紅色部分分配的空間會(huì)比藍(lán)色分配得多一些。
flex-basis
flex-basis 指的是讓彈性盒子的某一個(gè)子元素沿著主軸方向的固定寬度。默認(rèn)根據(jù)子元素的內(nèi)容來(lá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)容來(lái)分配寬度。
flex-shrink
當(dāng)彈性盒子在進(jìn)行伸縮操作時(shí),其所有子元素會(huì)根據(jù)瀏覽器的大小,等比例地縮小寬度。其中一個(gè)子元素?fù)碛?flex-shrink 屬性時(shí),在伸縮過(guò)程中,值越大,被忽略的優(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ā)生伸縮時(shí),彈性盒子的子元素伸縮的規(guī)則結(jié)果為,flex-shrink 的值越大,也就是權(quán)重越高,元素就越先被忽略。
flex
flex 是 flex-grow、flex-shrink、flex-basis的簡(jiǎn)寫(xiě)。flex 只有一個(gè)值時(shí),相當(dāng)于 flex-grow,有兩個(gè)值時(shí),相當(dāng)于 flex-shrink,以此類(lèi)推。
作用于交叉軸
以下屬性可以改變彈性盒子的子元素在交叉軸上的排列位置。
align-self
彈性盒子的子元素高度不一致時(shí),默認(rèn)所有子元素都排在彈性盒子的最頂端,即交叉軸的開(kāi)始位置。
align-self 屬性只作用于子元素,它可以改變子元素在彈性盒子交叉軸的上、中、下的排列位置。可以接受 stretch、center、start、end 四個(gè)值。
<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 時(shí),默認(rèn) 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>
若子元素沒(méi)有高度(或高度為 0),設(shè)置 align-items(或 align-self 設(shè)置在子元素上)在彈性盒子上,子元素將會(huì)消失。
align-content
當(dāng)彈性盒子的高度還有剩余空間,且容器可以換行。默認(rèn)所有的子元素都以交叉軸排列,下一排有一些空隙。
align-centent 可以改變彈性盒子內(nèi)子元素如何分配交叉軸剩余的空間??梢越邮?stretch、center、flex-end、flex-start、space-between、space-around 等。
如,將 align-content 設(shè)置為 flex-start,所有的子元素都緊湊在縱軸的開(kāi)始位置。
作用于主軸
除了上邊的幾個(gè)讓彈性盒子的子元素在交叉軸對(duì)齊方式的屬性以外,還可以讓子元素在主軸的對(duì)其方式的屬性。
justify-content
justify-content 用來(lái)使子元素在主軸方向上對(duì)齊,初始值為 flex-start,即所有的子元素從彈性盒子的起始位置開(kāi)始排列。
通過(guò)改變 justify-content 的屬性來(lái)改變對(duì)其方式,接受 stretch、flex-start、flex-end、center、space-around、space-between 六種值。
center 使彈性盒子的子元素集中向主軸的中心排列。
space-between 使彈性盒子的兩端子元素在主軸方向上向兩端散開(kāi),其余子元素平均分配剩余空間。
space-around 使彈性盒的子元素平均地分布在主軸上,兩端保留子元素與子元素之間間距大小的一半。
本文摘自 :https://www.cnblogs.com/