這篇文章主要介紹“CSS伸縮盒布局實(shí)例分析”，在日常操作中，相信很多人在CSS伸縮盒布局實(shí)例分析問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS伸縮盒布局實(shí)例分析”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
創(chuàng)新互聯(lián)公司成立于2013年，我們提供高端成都網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、成都全網(wǎng)營(yíng)銷(xiāo)推廣、微信小程序、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站推廣服務(wù)，提供專(zhuān)業(yè)營(yíng)銷(xiāo)思路、內(nèi)容策劃、視覺(jué)設(shè)計(jì)、程序開(kāi)發(fā)來(lái)完成項(xiàng)目落地，為成都人造霧企業(yè)提供源源不斷的流量和訂單咨詢(xún)。
伸縮容器：一個(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è)值之間沒(méi)有順序要求）。
給伸縮容器設(shè)置 justify-content屬性，可以設(shè)置伸縮項(xiàng)目在主軸上的對(duì)齊方式，屬性的值如下：
flex-start 默認(rèn)值，主軸起始對(duì)齊 flex-end 主軸結(jié)束對(duì)齊 center 居中 space-between 兩端沒(méi)有空隙，中間有空隙 space-around 兩端空隙是中間空隙的一半 space-enenly 兩端空隙與中間空隙相等
給伸縮容器設(shè)置 align-items屬性進(jìn)行設(shè)置，屬性值如下：
stretch 默認(rèn)值，伸縮項(xiàng)目在側(cè)軸方向的長(zhǎng)度（高度）在側(cè)軸方向拉伸（不設(shè)置在側(cè)軸方向的長(zhǎng)度，才會(huì)生效） flex-start 側(cè)軸起點(diǎn)對(duì)齊 flex-end 側(cè)軸終點(diǎn)對(duì)齊 center 居中對(duì)齊 baseline 文本基線對(duì)齊
給伸縮容易設(shè)置 align-content屬性進(jìn)行設(shè)置，屬性值如下：
strecch 默認(rèn)值 flex-start 側(cè)軸起點(diǎn)對(duì)齊 flex-end 側(cè)軸終點(diǎn)對(duì)齊 center 居中對(duì)齊 space-between 兩端沒(méi)有空隙，中間有空隙 space-around 兩端空隙是中間空隙的一半 space-enenly 兩端空隙與中間空隙相等
總結(jié)：
align-content 實(shí)際上設(shè)置的是多條主軸之間如何對(duì)齊。
align-items 屬性不論一條主軸線還是多條主軸線都會(huì)起作用；但是 align-content 只對(duì)多條主軸線情況下起作用。
flex-basis 指定長(zhǎng)度可以設(shè)置該伸縮項(xiàng)目在主軸上的長(zhǎng)度。
如果不設(shè)置 flex-basis，伸縮項(xiàng)目在主軸上的長(zhǎng)度取決于所設(shè)置的 width 或者 height。
指定數(shù)字表示擴(kuò)展的比率，該屬性的默認(rèn)值是 0。
伸縮項(xiàng)目發(fā)生擴(kuò)展的前提： 伸縮容器在主軸方向向上有富余的長(zhǎng)度。
伸縮項(xiàng)目進(jìn)行擴(kuò)展的時(shí)候只考慮伸縮項(xiàng)目的擴(kuò)展比率。
指定數(shù)字表示收縮的比率，該屬性的默認(rèn)值是 1。
伸縮項(xiàng)目發(fā)生收縮的前提： 伸縮容器在主軸方向上長(zhǎng)度不足。
伸縮項(xiàng)目進(jìn)行收縮既要考慮收縮比率，也要考慮收縮項(xiàng)目原來(lái)在主軸上的長(zhǎng)度。
同時(shí)設(shè)置擴(kuò)展比率、收縮比率、主軸基準(zhǔn)長(zhǎng)度，設(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è)軸上的對(duì)齊方式，屬性的值與 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)目在主軸上的對(duì)齊方式 | flex-start：主軸起點(diǎn)對(duì)齊。 flex-end：主軸終點(diǎn)對(duì)齊。 center：居中對(duì)齊。 space-between：兩端無(wú)空隙，中間有空隙。 **space-around：**兩端空隙是中間空隙的一半。 **space-evenly：**兩端空隙與中間空隙一致。 |
| align-items | 設(shè)置伸縮項(xiàng)目在側(cè)軸上的對(duì)齊方式（適用于一條主軸線） | stretch：默認(rèn)值，在側(cè)軸上拉伸。 flex-start：側(cè)軸起點(diǎn)對(duì)齊。 flex-end：側(cè)軸終點(diǎn)對(duì)齊。 center：居中對(duì)齊。 baseline：基線對(duì)齊。 |
| align-content | 設(shè)置伸縮項(xiàng)目在側(cè)軸上的對(duì)齊方式（適用于多條主軸線） | stretch：默認(rèn)值，在側(cè)軸上拉伸。 flex-start：側(cè)軸起點(diǎn)對(duì)齊。 flex-end：側(cè)軸終點(diǎn)對(duì)齊。 center：居中對(duì)齊。 space-between：兩端無(wú)空隙，中間有空隙。 **space-around：**兩端空隙是中間空隙的一半。 **space-evenly：**兩端空隙與中間空隙一致。 |
| CSS 屬性名 | 含義 | 值 |
|---|---|---|
| flex-grow | 擴(kuò)展比率 | 數(shù)字，默認(rèn)值是 0 |
| flex-shrink | 收縮比率 | 數(shù)字，默認(rèn)值是 1 |
| flex-basis | 在主軸上的基準(zhǔn)長(zhǎng)度 | 指定長(zhǎng)度，默認(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è)軸上的對(duì)齊方式 | **auto：**默認(rèn)值，按照伸縮容器的設(shè)置。 stretch：默認(rèn)值，在側(cè)軸上拉伸。 flex-start：側(cè)軸起點(diǎn)對(duì)齊。 flex-end：側(cè)軸終點(diǎn)對(duì)齊。 center：居中對(duì)齊。 baseline：基線對(duì)齊。 |
CSS3 彈性盒（Flexible Box 或 flexbox ），是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大 小以及設(shè)備類(lèi)型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素 進(jìn)行排列、對(duì)齊和分配空白空間。
容器 使用彈性盒布局的父元素 display:flex;
本質(zhì)：給父盒子添加flex屬性，來(lái)控制子盒子的位置和排列方式。
主軸：Flex容器的主軸主要用來(lái)配置Flex項(xiàng)目。他不一定是水平的，這主要取決于fle-direction屬性。
側(cè)軸：與主軸垂直的軸稱(chēng)作側(cè)軸，是側(cè)軸方向的延伸。
Flex父容器屬性
要改變?cè)氐哪Ｊ綖樯炜s容器，需要使用display屬性。
display:flex | inline-flex
flex:設(shè)置為塊級(jí)伸縮容器。
inline-flex:設(shè)置為內(nèi)聯(lián)級(jí)伸縮容器。
重慶分公司
重慶分公司
