關(guān)于CSS3中Flexbox布局的圖文代碼分享

為了更好理解flexbox布局，這里首先要介紹幾個(gè)概念：

如果所示：

（1）主軸（側(cè)軸），flexbox布局里面將一個(gè)可伸縮容器按照水平和垂直方向分為主軸或側(cè)軸，如果你想讓這個(gè)容器中的可伸縮項(xiàng)目在水平方向上可伸縮展開，那么水平方向上就是主軸，垂直方向上是側(cè)軸，反之亦然；

（2）主軸（側(cè)軸）長(zhǎng)度，當(dāng)確定了哪個(gè)是主軸哪個(gè)是側(cè)軸之后，在主軸方向上可伸縮容器的尺寸（寬或高）就被稱作主軸長(zhǎng)度，側(cè)軸方向上的容器尺寸（寬或高）就被稱作側(cè)軸長(zhǎng)度；

（3）主軸（側(cè)軸）起點(diǎn)，主軸（側(cè)軸）終點(diǎn)，例如主軸方向是水平方向，通常在水平方向上網(wǎng)頁布局是從左向右的，那么可伸縮容器的左border就是主軸起點(diǎn)，右border就是主軸終點(diǎn)，側(cè)軸是在垂直方向，通常是從上到下的，所以上border就是側(cè)軸起點(diǎn)，下border就是側(cè)軸終點(diǎn)；

（4）伸縮容器：如果要構(gòu)建一個(gè)可伸縮的盒子，這些可伸縮的項(xiàng)目必須要由一個(gè)display：flex的屬性的盒子包裹起來，這個(gè)盒子就叫做伸縮容器；

（5）伸縮項(xiàng)目：包含在伸縮容器中需要進(jìn)行伸縮布局的元素被稱作伸縮項(xiàng)目；

明確以上概念之后就可以來構(gòu)建flexbox布局了；

第一步，構(gòu)建一個(gè)flexbox容器，并在容器中放置幾個(gè)可伸縮項(xiàng)目，如下：

css代碼：

.flex-container{
 display:flex;
 width:600px;
 height:230px;
 background-color: #ccc;
 }.flex-item{
 background-color:blue;
 width: 100px;
 margin: 5px; }

HTML代碼：

<p class="flex-container">
 <p class="flex-item ">A</p>
 <p class="flex-item ">B</p>
 <p class="flex-item ">A</p>
 <p class="flex-item ">B</p>
 </p>

效果如下：

其中四個(gè)可伸縮的項(xiàng)目在水平方向上被排列成了一行，同時(shí)可伸縮項(xiàng)目相左對(duì)齊；

display：flex代表這個(gè)容器是一個(gè)可伸縮容器，還可以取值為inline-flex,兩者的區(qū)別在于前者將這個(gè)容器渲染為塊級(jí)元素，后者將其渲染為內(nèi)聯(lián)元素。

這里有幾個(gè)默認(rèn)的屬性雖然沒有設(shè)置，但是默認(rèn)值確實(shí)起作用了，它們是：

flex-direction屬性，它的取值為row，column，column-reverse，row-reverse,默認(rèn)值是row，表示在水平方向上展開可伸縮項(xiàng)，如果取column代表在垂直方向上展開可伸縮項(xiàng)目，column-reverse，row-reverse代表相反方向，通俗講，flex-direction屬性就是用來定義主軸側(cè)軸方向的。給以上效果添加flex-direction：column效果如下：

justify-content屬性，用來表示可伸縮項(xiàng)目在主軸方向上的對(duì)齊方式，可以取值為flex-start,flex-end,center,space-between,space-around，其中flex-start,flex-end,表示相對(duì)于主軸起點(diǎn)和終點(diǎn)對(duì)齊，center表示居中對(duì)齊，space-between表示兩端對(duì)齊并將剩余空間在主軸方向上進(jìn)行平均分配，space-around表示居中對(duì)齊然后在主軸方向上將剩余空間平均分配

justify-content:space-between

css代碼：

.flex-container{
 display:flex;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-between;
 }.flex-item{
 background-color:blue;
 width: 100px;
 margin: 5px;
 }

效果如下：

可以看到它將各個(gè)可伸縮項(xiàng)目在主軸方向上兩端對(duì)齊并平分了剩余空間；

justify-content:space-around

css代碼：

.flex-container{
 display:flex;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 }.flex-item{
 background-color:blue;
 width: 100px;
 margin: 5px;
 }

效果如下：

可以看到這個(gè)屬性讓可伸縮項(xiàng)目沿著主軸方向進(jìn)行了居中對(duì)齊并且均分了剩余空間；

align-items屬性：該屬性是用來表示可伸縮項(xiàng)目在側(cè)軸方向上的對(duì)齊方式，可取的值有flex-start,flex-end,center,baseline,stretch，需要解釋的是baseline值，它是按照一個(gè)計(jì)算出來的基準(zhǔn)線然后讓這些項(xiàng)目沿這個(gè)基準(zhǔn)線對(duì)齊，基準(zhǔn)線的計(jì)算取決于可伸縮項(xiàng)目的尺寸及內(nèi)容，如下：

align-items:baseline;

css代碼：

.flex-container{
 display:flex; 
 flex-direction: row;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:baseline;
 }
 .flex-item{
 background-color:blue;
 width: 100px;
 margin: 5px;; }
 .a{
 margin-top: 10px;
 height: 100px;
 }
 .b{
 margin-top: 20px;
 height: 150px;
 }
 .c{
 margin-top: 30px;
 height: 80px;
 }

HTML代碼：

 <p class="flex-container">
 <p class="flex-item a">A</p>
 <p class="flex-item b">B</p>
 <p class="flex-item c">A</p>
 <p class="flex-item a">B</p>
 </p>

效果如下：

可以看到四個(gè)可伸縮項(xiàng)目在側(cè)軸方向上（垂直方向）高度不一，margin不一樣，但是最后都按照計(jì)算出來的一個(gè)基準(zhǔn)線對(duì)齊；

align-items:stretch;

這個(gè)是取值會(huì)讓可伸縮項(xiàng)目在側(cè)軸方向上進(jìn)行拉伸，前提是這些項(xiàng)目在側(cè)軸方向上沒有設(shè)置尺寸，否則會(huì)按照你設(shè)置的尺寸來渲染。

css代碼：

.flex-container{
 display:flex;
 flex-direction: row;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:stretch;
 }
 .flex-item{
 background-color:blue;
 width: 100px; /*height: 100px;*/
 margin: 5px;; }

HTML代碼：

<p class="flex-container">
 <p class="flex-item ">A</p>
 <p class="flex-item ">B</p>
 <p class="flex-item ">A</p>
 <p class="flex-item ">B</p>
 </p>

效果如下：

可以看到這些可伸縮項(xiàng)目在側(cè)軸方向上被拉伸了，因?yàn)樵诖怪狈较蛏蠜]有設(shè)置高度。

到目前為止，我們所有的伸縮項(xiàng)目都是在一行或者一列上進(jìn)行的，并沒有進(jìn)行換行和換列，flex-wrap屬性表示是否支持換行或者換列，它有nowrap,wrap,wrap-reverse三個(gè)取值，nowrap是默認(rèn)值，表示不換行或者換列，wrap表示換行或者換列，wrap-reverse表示支持換行或者換列，但是會(huì)沿著相反方向進(jìn)行排列（如主軸是垂直方向換行后就按照先下后上的順序來排列伸縮項(xiàng)）

css代碼：

.flex-container{
 display:flex;
 flex-direction: row;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:baseline;
 flex-wrap: wrap;
 }
 .flex-item{
 background-color:blue;
 width: 100px;
 height: 70px;
 margin: 5px;; }

HTML代碼：

<p class="flex-container">
 <p class="flex-item ">A</p>
 <p class="flex-item ">B</p>
 <p class="flex-item ">A</p>
 <p class="flex-item ">B</p>
 <p class="flex-item ">A</p>
 <p class="flex-item ">B</p>
 <p class="flex-item ">A</p>
 <p class="flex-item ">B</p></p>

效果如下：

可以看到伸縮項(xiàng)增多之后一行難以放下的時(shí)候會(huì)接著換行。wrap屬性保證換行后按照正常的從上到下順序排列

align-content屬性用來表示換行之后各個(gè)伸縮行的對(duì)齊方式，它的取值有 stretch,flex-start,flex-end,center,space-between,space-around，意義和align-items屬性取值意義相同，上面我們將7個(gè)伸縮項(xiàng)目分成了兩行來排列，

將css代碼添加align-content屬性，html代碼不變，如下：

CSS代碼：

.flex-container{
 display:flex;
 flex-direction: row;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:baseline;
 flex-wrap: wrap;
 align-content: space-between;
 }
 .flex-item{
 background-color:blue;
 width: 100px;
 height: 70px;
 margin: 5px;; }

效果如下：

可以看到兩個(gè)伸縮行在側(cè)軸（垂直）方向上兩端對(duì)齊了。

flex-flow屬性，該屬性是個(gè)復(fù)屬性，它是flex-direction和flex-wrap的復(fù)合屬性，flex-direction：row;flex-wrap:wrap就等同于flex-flow:row wrap

order屬性，該屬性用來表示伸縮項(xiàng)目的排列方式，正常情況下伸縮項(xiàng)目會(huì)按照主軸起點(diǎn)到主軸終點(diǎn)排列，遇到換行或者換列會(huì)按照從側(cè)軸起點(diǎn)到終點(diǎn)進(jìn)行排列（除非設(shè)置了某些 對(duì)齊方式的reverse），但是某些情況下這種默認(rèn)顯示順序不符合要求，可以采用給伸縮項(xiàng)添加order屬性來指定排列順序，默認(rèn)情況下，每個(gè)伸縮項(xiàng)的order都是0，改屬性可正可負(fù)，越大的值會(huì)被排列在越后面。

css代碼：

 .flex-container{
 display:flex;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:baseline; 
 flex-flow: row wrap;
 align-content: space-between;

 }
 .flex-item{
 background-color:blue;
 width: 100px;
 height: 70px;
 margin: 5px;; }
 .order1{
 order:1;
 }
 .order2{
 order:2;
 }

HTML代碼：

<p class="flex-container">
 <p class="flex-item order1">1</p>
 <p class="flex-item order2">2</p>
 <p class="flex-item ">3</p>
 <p class="flex-item ">4</p>
 <p class="flex-item ">5</p>
 <p class="flex-item ">6</p>
 <p class="flex-item ">7</p>
 <p class="flex-item ">8</p></p>

效果如下：

默認(rèn)情況下，會(huì)按照HTML的順序1-8進(jìn)行顯示，但是由于給p1和2設(shè)置了大于0的order,所以他們被放在了最后顯示（因?yàn)槠渌麤]有被設(shè)置的p的order默認(rèn)屬性都是0）

margin屬性在flexbox布局中有很強(qiáng)大的作用，如果給某個(gè)可伸縮項(xiàng)設(shè)置某個(gè)方向上的margin為auto，那么這個(gè)可伸縮項(xiàng)就會(huì)在這個(gè)方向上占用該方向的剩余空間來作為自己的這個(gè)方向上的margin。

css代碼：

.flex-container{
 display:flex;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:baseline;
 flex-flow: row wrap;
 align-content: space-between;

 }
 .flex-item{
 background-color:blue;
 width: 100px;
 height: 70px;
 margin: 5px;; }
 .a{
 margin-right:auto;
 }

HTML代碼：

<p class="flex-container">
 <p class="flex-item a">1</p>
 <p class="flex-item ">2</p>
 <p class="flex-item ">3</p></p>

效果如下：

由于給伸縮項(xiàng)1添加了margin-right為auto，所以它獨(dú)占了本行的剩余空間作為它的right margin值。

利用這個(gè)特性，我們?cè)趂lexbox布局中很容易實(shí)現(xiàn)可伸縮元素的垂直水平居中，

css代碼;

.flex-container{
 display:flex;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:baseline;
 flex-flow: row wrap;
 align-content: space-between;

 }
 .flex-item{
 background-color:blue;
 width: 100px;
 height: 70px;
 margin: 5px;; }
 .a{
 margin:auto;
 }

HTML代碼：

<p class="flex-container">
 <p class="flex-item a">1</p></p>

效果如下：

align-self屬性，該屬性是給各個(gè)可伸縮項(xiàng)設(shè)置自己的在側(cè)軸上的對(duì)齊方式的，之前在容器上設(shè)置的align-item屬性是作為一個(gè)整體設(shè)置的，所有的元素對(duì)齊方式都一樣，align-self屬性會(huì)覆蓋之前的align-item屬性，讓每個(gè)可伸縮項(xiàng)在側(cè)軸上具有不同的對(duì)齊方式，取值和align-item相同：

css代碼：

.flex-container{
 display:flex;
 flex-direction: row;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:baseline;
 align-content: space-between;

 }
 .flex-item{
 background-color:blue;
 width: 100px;
 height: 70px;
 margin: 5px;; }
 .a{
 align-self:flex-start ;
 }
 .b{
 align-self:flex-end;
 }
 .c{
 align-self:center;
 }

html代碼：

<p class="flex-container">
 <p class="flex-item a">1</p>
 <p class="flex-item b">2</p>
 <p class="flex-item c">3</p></p>

效果如下：

可以看到三個(gè)伸縮項(xiàng)在側(cè)軸上被賦予了不同的對(duì)齊方式。

flex屬性，這個(gè)屬性是加在伸縮項(xiàng)上面的，它定義了伸縮項(xiàng)如何分配主軸尺寸，通常取值為auto或者數(shù)字，auto瀏覽器會(huì)自動(dòng)均分，數(shù)字會(huì)按照伸縮項(xiàng)所占的數(shù)字比重來分配空間，

這個(gè)屬性會(huì)覆蓋伸縮項(xiàng)在主軸上設(shè)定的尺寸，當(dāng)給主軸上伸縮項(xiàng)設(shè)定了尺寸（寬或高）和這個(gè)屬性的時(shí)候，事實(shí)上還是會(huì)按照這個(gè)屬性來進(jìn)行空間分配。

css代碼：

.flex-container{
 display:flex;
 flex-direction: row;
 width:600px;
 height:230px;
 background-color: #ccc;
 justify-content: space-around;
 align-items:baseline;
 align-content: space-between;

 }
 .flex-item{
 background-color:blue;
 width: 100px;
 height: 70px;
 margin: 5px;; }
 .a{
 align-self:flex-start ;
 flex:1;
 }
 .b{
 align-self:flex-end;
 flex:2;
 }
 .c{
 align-self:center;
 flex:1;
 }

HTML代碼：

<p class="flex-container">
 <p class="flex-item a">1</p>
 <p class="flex-item b">2</p>
 <p class="flex-item c">3</p></p>

效果如下：

可以看到伸縮項(xiàng)盡管設(shè)置了寬度，但是最終還是按照我們?cè)O(shè)置的flex比例對(duì)水平空間進(jìn)行了分割。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com