Flexbox布局

jopen 8年前發布 | 12K 次閱讀 WebKit 前端技術 Adobe Flex

Flexbox布局（ Flexible Box 或CSS3 彈性布局），是CSS3中的一種新的布局模式，是可以自動調整子元素的高和寬，來很好的填充任何不同屏幕大小的顯示設備中的可用顯示空間，收縮內容防止內容溢出，確保元素擁有恰當的行為的布局方式。使用Flexbox來布局更容易，可以使用更少的代碼，更簡單的方式實現更復雜的布局。它可以實現：

如果元素容器沒有足夠的空間，我們無需計算每個元素的寬度，就可以設置他們在同一行；
可以快速讓他們布局在一列；
可以方便讓他們對齊容器的左、右、中間等；
無需修改結構就可以改變他們的顯示順序；
如果元素容器設置百分比和視窗大小改變，不用提心未指定元素的確切寬度而破壞布局，因為容器中的每個子元素都可以自動分配容器的寬度或高度的比例。

瀏覽器兼容性

紅色代表不支持，綠色代表支持，暗綠色代表部分支持，其中IE10、IE11目前使用中出現了大量的bug，Android4.3只支持老的flexbox規范。可以發現該屬性在移動端的使用還是可能的，不過要加上老的規范寫法。

容器屬性（父元素屬性）

主軸：項目排列方向的軸（可以是水平或者垂直），每一行（列）項目代表一條軸

交叉軸：與主軸垂直的軸（可以是水平或者垂直）；

可以通過訪問 flexBox 測試以下屬性

1. display

取值：

flex 將對象作為彈性容器顯示
inline-flex 將對象作為內聯塊級彈性容器顯示。

注：以下是舊版本的屬性值：

box：將對象作為彈性容器顯示。（最老版本）

inline-box：將對象作為內聯塊級彈性容器顯示。（最老版本）

flexbox：將對象作為彈性容器顯示。（過渡版本）

inline-flexbox：將對象作為內聯塊級彈性容器顯示。（過渡版本）

2. flex-direction 決定主軸的方向（即項目的排列方向）。

取值：

row 主軸為水平方向，起點在左端。
row-reverse 主軸為水平方向，起點在右端。
column 主軸為垂直方向，起點在上沿。
column-reverse 主軸為垂直方向，起點在下沿。

3. flex-wrap 設置容器內的項目排列不下時是否換行

取值：

wrap 換行
no-wrap 一行顯示，不換行
wrap-reverse 倒序換行，將各行的順序倒序排列

4. justify-content 定義了項目在主軸上（依據設置的主軸方向而定）的對齊方式。

取值：

flex-start 左對齊
flex-end 右對齊
center 居中對齊
space-between 倆端對齊
space-around 項目間隔相同對齊

5.align-items 定義項目在交叉軸上的對齊方式。

flex-start 起點對齊
flex-end 終點對齊
center 居中對齊
baseline 項目的第一行文字的基線對齊。
stretch 如果項目未設置高度或設為auto，將占滿整個容器的高度。

6. align-content 當項目有多列（行）時，該屬性定義各軸的對齊方式

取值：

flex-start 起點對齊
flex-end 終點對齊
center 居中對齊
space-between 項目間隔相同對齊
space-around 每行（列）的間隔倆側相等對齊
stretch 項目布滿容器對齊

項目屬性（子元素屬性）

1. order 定義項目的排列順序。數值越小，排列越靠前，默認為0。

2. flex 定義了項目的大小，是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto

(1) flex-grow 定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大

(2) flex-shrink 定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小

(3) flex-basis 定義項目占據的空間,然后再分配多余空間。

3. align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的

測試用例

這幾天在項目中小范圍試用了下（移動端），結果UC和微信瀏覽器不支持，當時就蒙逼了好嗎。后來查了下，發現加上老版本的寫法和前綴即可。至少借的幾個手機測試是通過了。

</div>

代碼：

<div class="flexbox">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
<style>
     .flexbox{
        display: -webkit-flex;
        display: flex;
        /兼容老版本/
        display: -webkit-box;
        -webkit-align-items: center;
        align-items: center;
        /兼容老版本/
        -webkit-box-align: center;
        border:1px solid #000;
        min-height:200px;
    }
    .flexbox>div{
        flex: 1;
        -webkit-flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        background-color: green;
        border:1px solid blue;
    }
</style></pre> 
 
 
  如果覺得本文不錯的話，幫忙點擊下面的推薦哦,謝謝！

>>>>點擊閱讀原文 
 </div>
 </div>
來自： http://www.cnblogs.com/yzg1/p/5127700.html
                    
                    
                         本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1452856995651.html
                         WebKit 前端技術 Adobe Flex