flex入門—瞭解這些flex屬性

時間 2019-11-16

標籤 flex 入門瞭解這些屬性欄目 Flex 简体版

原文原文鏈接

傳統的頁面佈局

在flex出現以前，雙列布局，三列布局，動態盒居中,絕對居中佈局等常見的佈局均是採用dispaly+float+定位來佈局的，通常包括如下幾種佈局策略：css

normal flow(文檔流:塊級元素從上到下，行內元素從左到右)
float + clear
position relative + absolute
display inline-block
負margin(擴大寬度，產生位移，如一行裏的多個column)

flex來了

flex-即flexible,彈性的，靈活的，又叫彈性盒佈局(flexible box layout)，這種佈局方式主要有如下特色：html

塊級佈局側重垂直方向，行內佈局側重水平方向，而flex是與方向無關的(來源於後續提到的一個重要屬性flex-direction)
flex佈局能夠實現空間自動分配、自動對齊(彈性靈活的體現，與後續提到的flex-grow,flex-shrink，flex-basis屬性有很大關係)
flex適用於簡單的線性佈局(左右或上下佈局)，更復雜的佈局須要用grid佈局(如瀑布流佈局)

基本概念

關於flex佈局中，有如下幾個基本常識值得注意：bash

如圖所示flex佈局中有兩條軸線貫穿了外層容器，分別爲主軸和側軸(這裏主軸不必定是水平方向的軸線，具體有flex-direction而定，即主軸和側軸的方向是不必定的，也印證了flex佈局是方向無關的)
主軸的尺寸爲main size,側軸的尺寸爲cross size
主軸的起點和終點分別爲main start和main end,對應的側軸的起點和終點分別爲cross start和cross end
應用了display:flex屬性的元素叫作 flex container，即flex容器，它裏面的子元素叫作flex item
flex 容器的寬度老是自動擴張到最大值(注意是寬度，無論主軸是哪一個方向，它的寬度老是會擴張到最大值,即便這個容器元素是行內元素如span,而子元素的寬度受多個屬性影響，如flex-direction,align-items,flex-grow等，有時候看起來容器元素的寬度並不等於item元素寬度的和，以下圖2所示)
flex 容器內的子元素即flex-item在不指定height,width的狀況下老是自動收縮的(height原本就自動收縮，但當父元素display:flex後，這些子元素的寬度也都自動收縮，而沒有了本來塊級元素在寬度上自動擴張的特性)，一樣的，這裏不區分主軸的方向，height,width老是自動收縮
display:flex之後 float,clear,vertical-align等屬性均失效

flex container的六大屬性

flex-direction—方向

flex-direction 指定了子元素排列的方式，能夠爲row(按行展現)/column(按列展現)/inherit/row-reverse/column-reverse佈局

例1. 當flex-direction爲row時，顯示效果以下：post

圖2

其中html和css代碼以下：測試

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
</div>

.container{
  display:flex;
  border:1px solid red;
  height:300px;
}
.item{
  border:1px solid black;
}
複製代碼

例2.當爲.container添加flex-direction:cloumn屬性後，排列效果以下：flex

圖3

圖2，圖3中的flex-item都沒有指定width和height值，但咱們經過border能夠看到看到，圖2中的垂直方向的空間自動填滿了container的寬度，即container此時在主軸方向的長度，圖3中的水平方向的空間自動填滿了container的高度，一樣的，這也是container此時在側軸方向的長度，這個如今和後續提到的align-items有關，不過咱們暫時能夠作出以下總結：默認狀況下，flex-item元素在其側軸方向的長度老是自動擴張的(固然，後續會知道，只是默認狀況，稍微改變align-items屬性值，表現就會不同~)spa

flex-wrap

用於控制是否能夠換行(按row排列時)/列(按column排列時)，當flex-wrap是nowrap時，全部items老是自動縮小而不會換行(列)3d

flex-flow

flex-direction和flex-wrap的縮寫，如flex:row wrap實際上同時設置了 flex-direction:row和flex-wrap:wrap;code

justify-content

主軸方向的對齊方式，可取:flex-start/flex-end/center/space-around/space-between,默認爲flex-start

align-items

側軸方向的對齊方式，可取：flex-start/flex-end/center/stretch/baseline,默認爲stretch(填滿父空間,前提是不指定height值,當指定了height值時，會以該值爲主),也就是以前提到的默認狀況下，flex-item元素在其側軸方向的長度老是自動擴張的

align-itmes:stretch和height同時存在時

爲了測試指定height時，align-items：stretch仍是否會對元素項產生效果，進行了如下測試：

<div class="outer">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
</div>

.outer{
    align-items:stretch;
}
.outer div:nth-child(1){
  height:200px;
}
複製代碼

如圖所示，因爲align-items是stretch(也是默認值),因此除item1元素外的全部元素在側軸方向都自動拉伸到最大了，而item1之因此沒有自動拉伸，是由於對其顯示設置了高度，此時能夠理解爲height屬性的優先級要更高。

align-content

align-content屬性和justify-content，align-items是相似的，都是控制item元素之間的擺放方式，只是該屬性只有在主軸方向上有多個軸線時纔有效，如flex-direction是row時，若是item有換行則align-cnotent屬性值有效，當flex-direction是clolumn時，若是item有換列，則align-content有效，其中屬性值能夠取flex-start/flex-end/center/space-around/space-between/stretch

注意：justify-content是用於控制屬於不一樣的主軸線(能夠想象爲平行與主軸線)的元素在側軸方向的的排列方式，其屬性值包含space-around/space-between，沒有stretch,而align-items是用於控制單個元素在側軸方向的擺放的，其屬性值包含stretch,不含space-around/space-between，align-content則用於控制當同一個側軸有多個元素時，這些元素之間的擺放方式，它們便可取space-around/space-between，又可取stretch(當每個側軸都只穿過一個元素時(即沒有多個主軸線，沒換行/列)，該屬性失效)

align-content和align-items屬性同時指定時

以flex-direction:row時爲例，當item有多行時，align-content和align-items是同時有效的，align-content控制行於行之間的排列關係，align-items控制元素在一行中的位置，能夠看下如下例子：

html和css部分以下：

<div class="outer">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
  </div>

.outer{
  display:flex;
  border:1px solid red;
  height:300px;
  align-items:center;
  flex-wrap:wrap;
  align-content:flex-end;
}
.outer div{
  width:200px;
  border:1px solid black;
}
.outer div:nth-child(1){
  height:200px;
}

複製代碼

效果以下所示：

圖4

能夠看到，如今item1和item2是處於一行的，item3和item4是處於一行的，因爲align-content是flex-end,因此全部行依次排列在側軸的終點處，同時因爲align-items爲center，因此item2處於它所在行的垂直方向的中點處(原來並不是相對於它的父元素垂直居中，而是相對於它所在的行垂直居中)

接下來，再看一下把align-items:center去掉的效果

圖5

如圖5所示，和剛纔不一樣的是，item2在沒有指定高度的狀況下自動拉伸爲什麼item1的高度(指定了200px)同樣了，其實仍是由於align-items的效果，它雖然沒有顯示指定，但它的默認值是stretch，因此在它所處的行中在垂直方向自動拉伸了。

因此，當align-content有效時，不要覺得align-items就無效了，只是它們的做用不一樣而已，一個控制不一樣行元素相對於父元素(flex-container)的排列方式，一個用於控制元素在所處行中的垂直方向的位置(這裏指的flex-direction爲row,flex-direction爲column時請自行推算~)

flex item的六大屬性

flex-grow:多餘空間自動分配比例

用於控制當主軸方向空間過多時，元素在主軸方向的長度自動增長；若是多個元素同時指定了flex-grow，則多餘的空間會按照各自flex-grow值的比例自動分配

默認值：0

flex-shrink:超出空間自動收縮比例

當主軸方向空間不夠時，使元素在主軸方向的長度自動收縮(即便爲元素項設置了顯示寬度width值，依然會根據須要自動收縮，不一樣於以前container中的align-items屬性值stretch會低於height的優先級)，以使得總長度可以適應container的長度(當應用了flex-wrap:wrap時，通常是不會自動收縮的，由於這時候自動換行/列了，不會空間不夠)

默認值：1

flex-shrink和flex-wrap配合使用

flex-shrink的概念已經明瞭，看上去功能比較單一，不過不一樣的屬性值之間的搭配仍是會帶來不少樣化得效果的，尤爲是這裏就來看一下flex-shrink和flex-wrap的配合使用。

flex-shrink:0和flex-wrap:nowrap

下面看一下flex-shrink爲0而且container沒有設置flex-wrap屬性時的效果:

html和css以下：

<div class="outer">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
  </div>

.outer{
  display:flex;
  border:1px solid red;
  height:300px;
  align-content:flex-end;
}
.outer div{
  width:150px;
  
  border:1px solid black;
  flex-shrink:0;
}
.outer div:nth-child(1){
  height:200px;
}
.outer div:nth-child(2){
}

複製代碼