flex彈性布局學習總結

本文轉載自查看原文 2016-08-30 19:45 202364 CSS

本文首次發布在我的個人博客：Claiyre的個人博客 https://claiyre.github.io/

博客園地址：http://www.cnblogs.com/nuannuan7362/
如需轉載，請在文章開頭注明原文地址

一、簡要介紹

　　css3最喜歡的新屬性之一便是flex布局屬性，用六個字概括便是簡單、方便、快速。

　　flex（ flexible box：彈性布局盒模型）,是2009年w3c提出的一種可以簡潔、快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支持：

　　其中在webkit內核的瀏覽器中使用時，必須加上-webkit-前綴，以下不再重復說明。

　　下圖為flex的相關概念的示意圖

　　使用flex布局的容器（flex container），它內部的元素自動成為flex項目（flex item）。容器擁有兩根隱形的軸，水平的主軸（main axis），和豎直的交叉軸。主軸開始的位置，即主軸與右邊框的交點，稱為main start；主軸結束的位置稱為main end；交叉軸開始的位置稱為cross start；交叉軸結束的位置稱為cross end。item按主軸或交叉軸排列，item在主軸方向上占據的寬度稱為main size，在交叉軸方向上占據的寬度稱為cross size。

　　此外，需注意使用flex容器內元素，即flex item的float，clear、vertical-align屬性將失效。

二、屬性總結表

　　下圖是關於flex的屬性總結表，后面會詳細介紹每個屬性的意義和用法

三、容器屬性詳述

　　1.flex-direction

　　　　決定主軸的方向，即項目排列的方向，有四個可能的值：row(默認)|row-reverse|column|column-reverse

　　　　row:主軸為水平方向，項目沿主軸從左至右排列

　　　　column：主軸為豎直方向，項目沿主軸從上至下排列

　　　　row-reverse：主軸水平，項目從右至左排列，與row反向

　　　　column-reverse：主軸豎直，項目從下至上排列，與column反向

　　2、flex-wrap

　　　　默認情況下，item排列在一條線上，即主軸上，flex-wrap決定當排列不下時是否換行以及換行的方式，可能的值nowrap(默認)|wrap|wrap-reverse

　　　　nowrap：自動縮小項目，不換行

　　　　wrap：換行，且第一行在上方

　　　　wrap-reverse：換行，第一行在下面

　　3、flex-flow

　　　　是flex-direction和flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。默認值為row nowrap，即橫向排列不換行。

　　4、justify-content

　　　　決定item在主軸上的對齊方式，可能的值有flex-start（默認），flex-end，center，space-between，space-around。當主軸沿水平方向時，具體含義為

　　　　　　flex-start：左對齊

　　　　　　flex-end：右對齊

　　　　　　center：居中對齊

　　　　　　space- between：兩端對齊

　　　　　　space-around：沿軸線均勻分布

　　　　效果如下圖　

5、align-items

　　決定了item在交叉軸上的對齊方式，可能的值有flex-start|flex-end|center|baseline|stretch，當主軸水平時，其具體含義為

　　　　flex-start：頂端對齊

　　　　flex-end：底部對齊

　　　　center：豎直方向上居中對齊

　　　　baseline：item第一行文字的底部對齊

　　　　stretch：當item未設置高度時，item將和容器等高對齊

　　效果圖如下：

6、align-content

　　該屬性定義了當有多根主軸時，即item不止一行時，多行在交叉軸軸上的對齊方式。注意當有多行時，定義了align-content后，align-items屬性將失效。align-content可能值含義如下（假設主軸為水平方向）：

　　　　　　flex-start：左對齊

　　　　　　flex-end：右對齊

　　　　　　center：居中對齊

　　　　　　space- between：兩端對齊

　　　　　　space-around：沿軸線均勻分布

　　　　　　stretch：各行將根據其flex-grow值伸展以充分占據剩余空間

　　效果圖如下

四、flex item屬性詳述

　　item的屬性在item的style中設置。item共有如下六種屬性

　　1、order

　　　　order的值是整數，默認為0，整數越小，item排列越靠前，如下圖所示代碼如下

<div class="wrap">
    <div class="div" style="order:4"><h2>item 1</h2></div>
    <div class="div" style="order:2"><h2>item 2</h2></div>
    <div class="div" style="order:3"><h2>item 3</h2></div>
    <div class="div" style="order:1"><h2>item 4</h2></div>
</div>

效果圖為
　　

　　2、flex-grow

　　　　定義了當flex容器有多余空間時，item是否放大。默認值為0，即當有多余空間時也不放大；可能的值為整數，表示不同item的放大比例，如

<div class="wrap">
    <div class="div" style="flex-grow:1"><h2>item 1</h2></div>
    <div class="div" style="flex-grow:2"><h2>item 2</h2></div>
    <div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>

即當有多余空間時item1、item2、和item3以1：2:3的比例放大。

　　3、flex-shrink

　　　　定義了當容器空間不足時，item是否縮小。默認值為1，表示當空間不足時，item自動縮小，其可能的值為整數，表示不同item的縮小比例。flex-grow

　　4、flex-basis

　　　　表示項目在主軸上占據的空間，默認值為auto。如下代碼

<div class="wrap">
    <div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
    <div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
    <div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div>