CSS伸縮盒布局實例分析

這篇文章主要介紹“CSS伸縮盒布局實例分析”，在日常操作中，相信很多人在CSS伸縮盒布局實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS伸縮盒布局實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司成立于2013年，我們提供高端成都網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)站定制、成都全網(wǎng)營銷推廣、微信小程序、微信公眾號開發(fā)、網(wǎng)站推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項目落地，為成都人造霧企業(yè)提供源源不斷的流量和訂單咨詢。

伸縮盒布局

1 伸縮容器和伸縮項目

伸縮容器：一個元素設(shè)置 CSS 屬性 display:flex 或者 display:inline-flex ，該元素就變?yōu)樯炜s容器。

伸縮項目：伸縮容器的子元素就是伸縮項目。

伸縮項目的特點：

1. 伸縮項目會在伸縮容器默認中水平排列。

2. 伸縮項目可以設(shè)置寬高、內(nèi)外邊距且不存在外邊距塌陷， 不會脫離文檔流，具有伸縮性。

3. 一個元素可以同時是伸縮項目和伸縮容器。

2 設(shè)置主軸方向和換行方式

主軸：伸縮項目沿著主軸排列， 默認的主軸方向是從左到右。

側(cè)軸：與主軸垂直的軸叫側(cè)軸，側(cè)軸方向隨主軸方向變化。

設(shè)置主軸方向

給伸縮容器給 CSS 屬性 flex-direction可以設(shè)置主軸方向，值如下：

row				水平從左到右，默認值
row-reverse		水平從右到左
column			垂直從上到下
column-reverse	垂直從下到上

設(shè)置換行方式

給伸縮容器 CSS 屬性 flex-wrap可以設(shè)置伸縮項目在主軸方向上的換行方式，屬性的值如下：

nowrap			默認值，不換行
wrap			自動換行
wrap-reverse	自動換行，行翻轉(zhuǎn)

同時設(shè)置主軸方向和換行方式

flex-flow是 flex-directrion 和 flex-wrap 的復(fù)合屬性，可以同時設(shè)置主軸方向和換行方式。

flex-flow可以設(shè)置 1 個值也可以設(shè)置 2 個值（兩個值之間沒有順序要求）。

3 設(shè)置伸縮項目在主軸上的對齊方式

給伸縮容器設(shè)置 justify-content屬性，可以設(shè)置伸縮項目在主軸上的對齊方式，屬性的值如下：

flex-start			默認值，主軸起始對齊
flex-end			主軸結(jié)束對齊
center				居中
space-between		兩端沒有空隙，中間有空隙
space-around		兩端空隙是中間空隙的一半
space-enenly		兩端空隙與中間空隙相等

4 設(shè)置伸縮項目在側(cè)軸上的對齊方式

一條主軸線（伸縮項目在主軸上不換行）

給伸縮容器設(shè)置 align-items屬性進行設(shè)置，屬性值如下：

stretch			默認值，伸縮項目在側(cè)軸方向的長度（高度）在側(cè)軸方向拉伸（不設(shè)置在側(cè)軸方向的長度，才會生效）
flex-start		側(cè)軸起點對齊
flex-end		側(cè)軸終點對齊
center			居中對齊
baseline		文本基線對齊

多條主軸線 （伸縮項目在主軸上發(fā)生換行）

給伸縮容易設(shè)置 align-content屬性進行設(shè)置，屬性值如下：

strecch			默認值
flex-start		側(cè)軸起點對齊
flex-end		側(cè)軸終點對齊
center			居中對齊
space-between	兩端沒有空隙，中間有空隙
space-around	兩端空隙是中間空隙的一半
space-enenly	兩端空隙與中間空隙相等

總結(jié)：

1. align-content 實際上設(shè)置的是多條主軸之間如何對齊。

2. align-items 屬性不論一條主軸線還是多條主軸線都會起作用；但是 align-content 只對多條主軸線情況下起作用。

5 伸縮項目的伸縮性

伸縮項目在主軸上的基準長度 flex-basis

flex-basis 指定長度可以設(shè)置該伸縮項目在主軸上的長度。

如果不設(shè)置 flex-basis，伸縮項目在主軸上的長度取決于所設(shè)置的 width 或者 height。

擴展比率 flex-grow

指定數(shù)字表示擴展的比率，該屬性的默認值是 0。

伸縮項目發(fā)生擴展的前提： 伸縮容器在主軸方向向上有富余的長度。

伸縮項目進行擴展的時候只考慮伸縮項目的擴展比率。

收縮比率 flex-shrink

指定數(shù)字表示收縮的比率，該屬性的默認值是 1。

伸縮項目發(fā)生收縮的前提： 伸縮容器在主軸方向上長度不足。

伸縮項目進行收縮既要考慮收縮比率，也要考慮收縮項目原來在主軸上的長度。

flex 復(fù)合屬性

同時設(shè)置擴展比率、收縮比率、主軸基準長度，設(shè)置規(guī)則如下：

flex: grow shrink basis;flex: 0 1 auto;   /* 擴展比率是0，收縮比率是1，基準值是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 */

6 伸縮項目排序

使用 order 屬性設(shè)置伸縮項目的排序，值是數(shù)字，數(shù)字越小排序越靠前，可以是負值。默認值是 0。

order: 1;

7 單獨設(shè)置伸縮項目在側(cè)軸上的對齊方式

給伸縮項目設(shè)置屬性 align-self可以單獨設(shè)置該伸縮項目在側(cè)軸上的對齊方式，屬性的值與 align-items 一致。

8 伸縮盒相關(guān) CSS 屬性總結(jié)

設(shè)置給伸縮容器的屬性

CSS 屬性名	含義	值
display	設(shè)置伸縮容器	flex：塊級伸縮容器。 **inline-flex：**行內(nèi)伸縮容器。
flex-direction	設(shè)置主軸方向	row：默認值，水平從左到右。 row-reverse：水平從右到左。 column：垂直從上到下。 **column-reverse：**垂直從下到上
flex-wrap	設(shè)置換行方式	nowrap：默認值，不換行。 wrap：自動換行。 wrap-reverse：自動換行且行翻轉(zhuǎn)。
flex-flow	同時設(shè)置主軸方向和換行方式	flex-dierection 和 flex-wrap 的值
justify-content	設(shè)置伸縮項目在主軸上的對齊方式	flex-start：主軸起點對齊。 flex-end：主軸終點對齊。 center：居中對齊。 space-between：兩端無空隙，中間有空隙。 **space-around：**兩端空隙是中間空隙的一半。 **space-evenly：**兩端空隙與中間空隙一致。
align-items	設(shè)置伸縮項目在側(cè)軸上的對齊方式（適用于一條主軸線）	stretch：默認值，在側(cè)軸上拉伸。 flex-start：側(cè)軸起點對齊。 flex-end：側(cè)軸終點對齊。 center：居中對齊。 baseline：基線對齊。
align-content	設(shè)置伸縮項目在側(cè)軸上的對齊方式（適用于多條主軸線）	stretch：默認值，在側(cè)軸上拉伸。 flex-start：側(cè)軸起點對齊。 flex-end：側(cè)軸終點對齊。 center：居中對齊。 space-between：兩端無空隙，中間有空隙。 **space-around：**兩端空隙是中間空隙的一半。 **space-evenly：**兩端空隙與中間空隙一致。

設(shè)置給伸縮項目的屬性

CSS 屬性名	含義	值
flex-grow	擴展比率	數(shù)字，默認值是 0
flex-shrink	收縮比率	數(shù)字，默認值是 1
flex-basis	在主軸上的基準長度	指定長度，默認值是 auto
flex	復(fù)合屬性，同時設(shè)置 grow shrink basis	grow shrink basis
order	伸縮項目的排序	數(shù)字，默認值是 0
align-self	單獨設(shè)置伸縮項目在側(cè)軸上的對齊方式	**auto：**默認值，按照伸縮容器的設(shè)置。 stretch：默認值，在側(cè)軸上拉伸。 flex-start：側(cè)軸起點對齊。 flex-end：側(cè)軸終點對齊。 center：居中對齊。 baseline：基線對齊。

示例如下：

CSS3 彈性盒（Flexible Box 或 flexbox ），是一種當頁面需要適應(yīng)不同的屏幕大 小以及設(shè)備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素 進行排列、對齊和分配空白空間。

容器  使用彈性盒布局的父元素 display:flex;

本質(zhì)：給父盒子添加flex屬性，來控制子盒子的位置和排列方式。

主軸：Flex容器的主軸主要用來配置Flex項目。他不一定是水平的，這主要取決于fle-direction屬性。

側(cè)軸：與主軸垂直的軸稱作側(cè)軸，是側(cè)軸方向的延伸。

Flex父容器屬性

要改變元素的模式為伸縮容器，需要使用display屬性。

display:flex | inline-flex

flex:設(shè)置為塊級伸縮容器。

inline-flex:設(shè)置為內(nèi)聯(lián)級伸縮容器。

<!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é)果：

塊級伸縮容器與內(nèi)聯(lián)級伸縮容器類似，默認都是從左往右排列，唯一不同的是塊級伸縮容器獨占一行，而內(nèi)聯(lián)級伸縮容器隨著內(nèi)容改變。

Flex容器不是塊容器，因此有些設(shè)計用來控制塊布局的屬性在伸縮布局中不適用。浮動無法影響伸縮容器，而且伸縮容器的margin與其內(nèi)容的margin不會重疊。如果內(nèi)聯(lián)伸縮容器設(shè)置了浮動，元素將會以塊級伸縮容器顯示。

到此，關(guān)于“CSS伸縮盒布局實例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

標題名稱：CSS伸縮盒布局實例分析
當前URL：http://bm7419.com/article10/jdeodo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、靜態(tài)網(wǎng)站、軟件開發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)