flex彈性佈局學習總結

時間 2019-11-12

標籤 flex 彈性佈局學習總結欄目 Flex 简体版

原文原文鏈接

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

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

1、簡要介紹
git

　　css3最喜歡的新屬性之一即是flex佈局屬性，用六個字歸納即是簡單、方便、快速。github

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

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

　　下圖爲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

2、屬性總結表spa

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

3、容器屬性詳述

　　1.flex-direction

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

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

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

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

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

　　二、flex-wrap

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

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

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

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

　　三、flex-flow

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

　　四、justify-content

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

　　　　　　flex-start：左對齊

　　　　　　flex-end：右對齊

　　　　　　center：居中對齊

　　　　　　space- between：兩端對齊

　　　　　　space-around：沿軸線均勻分佈

　　　　效果以下圖　

五、align-items

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

　　　　flex-start：頂端對齊

　　　　flex-end：底部對齊

　　　　center：豎直方向上居中對齊

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

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

　　效果圖以下：

六、align-content

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

　　　　　　flex-start：左對齊

　　　　　　flex-end：右對齊

　　　　　　center：居中對齊

　　　　　　space- between：兩端對齊

　　　　　　space-around：沿軸線均勻分佈

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

　　效果圖以下

4、flex item屬性詳述

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

　　一、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>

效果圖爲
　　

　　二、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>

即當有多餘空間時item一、item二、和item3以1：2:3的比例放大。

　　三、flex-shrink

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

　　四、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>