溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS伸縮盒布局實(shí)例分析”，在日常操作中，相信很多人在CSS伸縮盒布局實(shí)例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS伸縮盒布局實(shí)例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
伸縮容器： 一個(gè)元素設(shè)置 CSS 屬性 display:flex 或者 display:inline-flex ，該元素就變?yōu)樯炜s容器。
伸縮項(xiàng)目： 伸縮容器的子元素就是伸縮項(xiàng)目。
伸縮項(xiàng)目的特點(diǎn)：
伸縮項(xiàng)目會(huì)在伸縮容器默認(rèn)中水平排列。
伸縮項(xiàng)目可以設(shè)置寬高、內(nèi)外邊距且不存在外邊距塌陷， 不會(huì)脫離文檔流，具有伸縮性。
一個(gè)元素可以同時(shí)是伸縮項(xiàng)目和伸縮容器。
主軸： 伸縮項(xiàng)目沿著主軸排列， 默認(rèn)的主軸方向是從左到右。
側(cè)軸： 與主軸垂直的軸叫側(cè)軸，側(cè)軸方向隨主軸方向變化。
給伸縮容器給 CSS 屬性 flex-direction 可以設(shè)置主軸方向，值如下：
row 水平從左到右，默認(rèn)值 row-reverse 水平從右到左 column 垂直從上到下 column-reverse 垂直從下到上
給伸縮容器 CSS 屬性 flex-wrap 可以設(shè)置伸縮項(xiàng)目在主軸方向上的換行方式，屬性的值如下：
nowrap 默認(rèn)值，不換行 wrap 自動(dòng)換行 wrap-reverse 自動(dòng)換行，行翻轉(zhuǎn)
flex-flow 是 flex-directrion 和 flex-wrap 的復(fù)合屬性，可以同時(shí)設(shè)置主軸方向和換行方式。
flex-flow 可以設(shè)置 1 個(gè)值也可以設(shè)置 2 個(gè)值（兩個(gè)值之間沒有順序要求）。
給伸縮容器設(shè)置 justify-content 屬性，可以設(shè)置伸縮項(xiàng)目在主軸上的對齊方式，屬性的值如下：
flex-start 默認(rèn)值，主軸起始對齊 flex-end 主軸結(jié)束對齊 center 居中 space-between 兩端沒有空隙，中間有空隙 space-around 兩端空隙是中間空隙的一半 space-enenly 兩端空隙與中間空隙相等
給伸縮容器設(shè)置 align-items 屬性進(jìn)行設(shè)置，屬性值如下：
stretch 默認(rèn)值，伸縮項(xiàng)目在側(cè)軸方向的長度（高度）在側(cè)軸方向拉伸（不設(shè)置在側(cè)軸方向的長度，才會(huì)生效） flex-start 側(cè)軸起點(diǎn)對齊 flex-end 側(cè)軸終點(diǎn)對齊 center 居中對齊 baseline 文本基線對齊
給伸縮容易設(shè)置 align-content 屬性進(jìn)行設(shè)置，屬性值如下：
strecch 默認(rèn)值 flex-start 側(cè)軸起點(diǎn)對齊 flex-end 側(cè)軸終點(diǎn)對齊 center 居中對齊 space-between 兩端沒有空隙，中間有空隙 space-around 兩端空隙是中間空隙的一半 space-enenly 兩端空隙與中間空隙相等
總結(jié)：
align-content 實(shí)際上設(shè)置的是多條主軸之間如何對齊。
align-items 屬性不論一條主軸線還是多條主軸線都會(huì)起作用；但是 align-content 只對多條主軸線情況下起作用。
flex-basis 指定長度可以設(shè)置該伸縮項(xiàng)目在主軸上的長度。
如果不設(shè)置 flex-basis，伸縮項(xiàng)目在主軸上的長度取決于所設(shè)置的 width 或者 height。
指定數(shù)字表示擴(kuò)展的比率，該屬性的默認(rèn)值是 0。
伸縮項(xiàng)目發(fā)生擴(kuò)展的前提： 伸縮容器在主軸方向向上有富余的長度。
伸縮項(xiàng)目進(jìn)行擴(kuò)展的時(shí)候只考慮伸縮項(xiàng)目的擴(kuò)展比率。
指定數(shù)字表示收縮的比率，該屬性的默認(rèn)值是 1。
伸縮項(xiàng)目發(fā)生收縮的前提： 伸縮容器在主軸方向上長度不足。
伸縮項(xiàng)目進(jìn)行收縮既要考慮收縮比率，也要考慮收縮項(xiàng)目原來在主軸上的長度。
同時(shí)設(shè)置擴(kuò)展比率、收縮比率、主軸基準(zhǔn)長度，設(shè)置規(guī)則如下：
flex: grow shrink basis;flex: 0 1 auto; /* 擴(kuò)展比率是0，收縮比率是1，基準(zhǔn)值是auto */
flex: 1; /* flex: 1 1 0; */flex: auto; /* flex: 1 1 auto; */flex: none; /* flex: 0 0 auto 不伸不縮*/flex: 0 auto; /* flex: 0 1 auto */
使用 order 屬性設(shè)置伸縮項(xiàng)目的排序，值是數(shù)字，數(shù)字越小排序越靠前，可以是負(fù)值。默認(rèn)值是 0。
order: 1;
給伸縮項(xiàng)目設(shè)置屬性 align-self 可以單獨(dú)設(shè)置該伸縮項(xiàng)目在側(cè)軸上的對齊方式，屬性的值與 align-items 一致。
| CSS 屬性名 | 含義 | 值 |
|---|---|---|
| display | 設(shè)置伸縮容器 | flex：塊級(jí)伸縮容器。 **inline-flex：**行內(nèi)伸縮容器。 |
| flex-direction | 設(shè)置主軸方向 | row： 默認(rèn)值，水平從左到右。 row-reverse： 水平從右到左。 column： 垂直從上到下。 **column-reverse：**垂直從下到上 |
| flex-wrap | 設(shè)置換行方式 | nowrap： 默認(rèn)值，不換行。 wrap： 自動(dòng)換行。 wrap-reverse： 自動(dòng)換行且行翻轉(zhuǎn)。 |
| flex-flow | 同時(shí)設(shè)置主軸方向和換行方式 | flex-dierection 和 flex-wrap 的值 |
| justify-content | 設(shè)置伸縮項(xiàng)目在主軸上的對齊方式 | flex-start： 主軸起點(diǎn)對齊。 flex-end： 主軸終點(diǎn)對齊。 center： 居中對齊。 space-between： 兩端無空隙，中間有空隙。 **space-around：**兩端空隙是中間空隙的一半。 **space-evenly：**兩端空隙與中間空隙一致。 |
| align-items | 設(shè)置伸縮項(xiàng)目在側(cè)軸上的對齊方式（適用于一條主軸線） | stretch： 默認(rèn)值，在側(cè)軸上拉伸。 flex-start： 側(cè)軸起點(diǎn)對齊。 flex-end： 側(cè)軸終點(diǎn)對齊。 center： 居中對齊。 baseline： 基線對齊。 |
| align-content | 設(shè)置伸縮項(xiàng)目在側(cè)軸上的對齊方式（適用于多條主軸線） | stretch： 默認(rèn)值，在側(cè)軸上拉伸。 flex-start： 側(cè)軸起點(diǎn)對齊。 flex-end： 側(cè)軸終點(diǎn)對齊。 center： 居中對齊。 space-between： 兩端無空隙，中間有空隙。 **space-around：**兩端空隙是中間空隙的一半。 **space-evenly：**兩端空隙與中間空隙一致。 |
| CSS 屬性名 | 含義 | 值 |
|---|---|---|
| flex-grow | 擴(kuò)展比率 | 數(shù)字，默認(rèn)值是 0 |
| flex-shrink | 收縮比率 | 數(shù)字，默認(rèn)值是 1 |
| flex-basis | 在主軸上的基準(zhǔn)長度 | 指定長度，默認(rèn)值是 auto |
| flex | 復(fù)合屬性，同時(shí)設(shè)置 grow shrink basis | grow shrink basis |
| order | 伸縮項(xiàng)目的排序 | 數(shù)字，默認(rèn)值是 0 |
| align-self | 單獨(dú)設(shè)置伸縮項(xiàng)目在側(cè)軸上的對齊方式 | **auto：**默認(rèn)值，按照伸縮容器的設(shè)置。 stretch： 默認(rèn)值，在側(cè)軸上拉伸。 flex-start： 側(cè)軸起點(diǎn)對齊。 flex-end： 側(cè)軸終點(diǎn)對齊。 center： 居中對齊。 baseline： 基線對齊。 |
CSS3 彈性盒（Flexible Box 或 flexbox ），是一種當(dāng)頁面需要適應(yīng)不同的屏幕大 小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的子元素 進(jìn)行排列、對齊和分配空白空間。
容器 使用彈性盒布局的父元素 display:flex;
本質(zhì)：給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
主軸：Flex容器的主軸主要用來配置Flex項(xiàng)目。他不一定是水平的，這主要取決于fle-direction屬性。
側(cè)軸：與主軸垂直的軸稱作側(cè)軸，是側(cè)軸方向的延伸。
Flex父容器屬性
要改變元素的模式為伸縮容器，需要使用display屬性。
display:flex | inline-flex
flex:設(shè)置為塊級(jí)伸縮容器。
inline-flex:設(shè)置為內(nèi)聯(lián)級(jí)伸縮容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div>div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
#box{
display:flex;
border:1px solid;
margin:20px;
}
#inline{
display:inline-flex;
border:1px solid;
margin:20px;
}
</style>
</head>
<body>
<div id="box">
<div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div id="inline">
<div>A</div><div>B</div><div>c</div><div>D</div>
</div>
</body>
</html>輸出結(jié)果：
塊級(jí)伸縮容器與內(nèi)聯(lián)級(jí)伸縮容器類似，默認(rèn)都是從左往右排列，唯一不同的是塊級(jí)伸縮容器獨(dú)占一行，而內(nèi)聯(lián)級(jí)伸縮容器隨著內(nèi)容改變。
Flex容器不是塊容器，因此有些設(shè)計(jì)用來控制塊布局的屬性在伸縮布局中不適用。浮動(dòng)無法影響伸縮容器，而且伸縮容器的margin與其內(nèi)容的margin不會(huì)重疊。如果內(nèi)聯(lián)伸縮容器設(shè)置了浮動(dòng)，元素將會(huì)以塊級(jí)伸縮容器顯示。
到此，關(guān)于“CSS伸縮盒布局實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼