CSS之flexbox指南

時間 2019-11-15

標籤 css flexbox 指南欄目 CSS 简体版

原文原文鏈接

控制對齊方式須要用到的的屬性

爲了控制「對齊」，會用到如下屬性：
justify-content——控制主軸(main axis)上全部item的對齊；
align-items——控制交叉軸(cross axis)上全部item的對齊；
align-self——控制交叉軸(cross axis)上某一特定item的對齊；
align-content——當項目的數量多到佔據多行時，控制交叉軸(cross axis)上每行之間空間的分佈狀況；css

主軸(main axis)&交叉軸(cross axis)

主軸與交叉軸就至關於一個二維座標系的橫軸和縱軸。
當在容器的css參數中，設置display:flex;後，該容器即成爲一個flex box。
這時，咱們能夠經過設置flex-direction:row;或者flex-direction:column;來控制容器中的item的排布方向。
row表明橫向排布，column表明縱向排布。
另外還能夠取的值是：row-reverse與column-reverse，他們相對於row和column只是換了個方向而已。
值得注意的是，主軸與交叉軸的方向會根據flex-direction值的不一樣而變化。
當flex-direction:row時，主軸和交叉軸的關係以下圖所示：html

而當flex-direction:column時，主軸與交叉軸的關係以下圖所示：佈局

justify-content

例：flex

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">  
            <div class="item">one</div>
            <div class="item">two</div>
            <div class="item">three</div>
            <div class="item">four</div>
            <div class="item">five</div>      
        </div>
</html>

css文件：spa

html, body {
    margin: 0;
    padding: 0;
}

.container{
    height: 600px;
    width: 600px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    border: 1px dotted black;
    flex-direction: row;
}

.item{
    background-color: #666;
    margin-right: 2px;
}

能夠看到，咱們有一個高600px，寬600px的容器。併爲該容器設置了display:flex;，還經過flex-direction:row;規定其中item的排布方向爲橫向排列。
咱們只爲其中的item設置了背景色和一個2px的右邊距。
效果如圖：設計

能夠看到，當沒有設置item的高、寬屬性時，item在容器中默認是拉伸填滿容器的。
如今，咱們爲item設置高、寬屬性：3d

.item{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin-right: 2px;
}

效果以下圖：code

能夠看到，拉伸效果消失了。
並且，全部的item都自動左對齊了。那麼若是咱們想讓item都右對齊，應該怎麼作呢？
這個時候justify-content屬性就派上用場了。
justify-content屬性，簡單說來，就是控制item在主軸上的對齊方式。
其可取的值有：
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: stretch
justify-content: space-evenlyhtm

各個屬性值所對應的效果以下：
flex-start（默認效果）blog

.container{
    height: 600px;
    width: 600px;
    justify-content: flex-start;
    ...
}

flex-end

.container{
    height: 600px;
    width: 600px;
    justify-content: flex-end;
    ...
}

center

.container{
    height: 600px;
    width: 600px;
    justify-content: center;
    ...
}

space-between

.container{
    height: 600px;
    width: 600px;
    justify-content: space-between;
    ...
}

space-between屬性值讓各個item兩邊不留邊距，而平均分配item之間的空間。P.S:圖中最右側的2px的邊距是以前設置的item的右邊距。
space-around

.container{
    height: 600px;
    width: 600px;
    justify-content: space-around;
    ...
}

能夠看到，正如around所暗示的，和space-between不一樣，此次左右兩邊都有分配空間。並且是子容器沿主軸均勻分佈，位於首尾兩端的子容器到父容器的距離是子容器間距的一半。
stretch
因爲設置了item的寬和高，因此stretch不會生效。
space-evenly

.container{
    height: 600px;
    width: 600px;
    justify-content: space-evenly;
    ...
}

space-evenly指的是空間的平均分配。

align-items

從上面的例子能夠看出，當咱們的item橫向排布時，justify-content是控制着橫方向上的元素對齊方式。
那若是咱們但願控制豎方向上item的排列方式應該怎樣作能？
這時候就須要用到align-item屬性了。
爲了便於理解，此次咱們只用一個容器和一個item，而且不設置justify-content。

html文件：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">  
            <div class="item">one</div>
        </div>
</html>

css樣式

html, body {
    margin: 0;
    padding: 0;
}

.container{
    height: 600px;
    width: 100px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    border: 1px dotted black;
    flex-direction: row;
}

.item{
    height: 50px;
    width: 50px;
    background-color: #666;
}

效果以下圖：

能夠看到，在交叉軸（這種狀況下也就是咱們常說的縱軸）上，item默認的排布也是flex-start。
而align-items能夠取的值也和justify-content相似：
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline

flex-start（默認值）

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    ...
}

效果如上圖所示。
flex-end

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    ...
}

flex-center

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    ...
}

stretch
同理，因爲已經設置了item的寬和高，因此stretch不會產生拉伸效果。

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    ...
}

base-line
爲了表現基線對齊，咱們用到了三個item，效果如圖：

這三個item等寬，高度分別爲60px,80px,100px。並且都經過<br>讓文字向下換了一行。他們在交叉軸上仍然是基線對齊的。這裏的baseline默認是指首行文字的基線。

同時使用justify-content和align-items屬性

這就好像平面直角座標系用橫座標和縱座標定位一個點同樣，咱們能夠同時使用這兩個屬性來定位一個item在容器中的位置。
好比，咱們想讓一個item定位到容器的中間。
就能夠這樣寫：

又好比，想要讓三個item在box的中軸線上分佈，並且它們之間的空間相等：

能夠看到，這裏咱們經過justify-content:space-between令這三個item之間的空間相等。又經過aling-items:center令他們在交叉軸方向上處於中間。

flex-direction: column時的item排布

此時item排布的原理與flex-direction:row時是一致的。
只不過此次主軸換到了豎直方向，而交叉軸換到了水平方向。
根據上面咱們講到的原理，咱們不妨試舉一例。
好比，有豎直排布的三個item，咱們但願它們能夠實現以下圖所示的設計：

就能夠這樣設置咱們的css樣式：

.box {
  height:300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

經過justify-content: flex-end咱們實現了讓這三個item排布到主軸（這種狀況下是豎直方向這個軸）的尾端(end)；
再經過align-items: center咱們實現了讓這三個item排布到交叉軸（這種狀況下是橫向的這個軸）的中間。
綜合起來，就造成了這樣一個佈局。

關於start和end

簡單起見，咱們能夠直接將start理解爲座標系原點所在的方位，而end則是座標軸的箭頭所指向的無限遠的方向。
須要指出的是，對於從左往右的書寫模式，好比漢語、英語等，start能夠理解爲left，end能夠理解爲right，而對於從右往左的書寫模式，好比阿拉伯語，則有，start能夠理解爲right，end能夠理解爲left。

align-self

當咱們爲一個box容器設置了align-items和 justify-content屬性以後，這套約束的規則將對其中的全部item都適用。
但是若是咱們不但願某一個item被這套規則約束怎麼辦呢？
這時候align-self就派上用場了。
align-self屬性能夠取align-items屬性的全部值。
好比，在上面的例子中，若是咱們把3 號item的align-self值設置爲：align-self:flex-end;，則有：

這就至關於3號item宣告天下，它不接受經過align-items設置的規則，而是要設置本身的規則，這也是爲何align-self能夠取的值和align-items如出一轍。

align-content

到目前爲止，咱們討論了在flex容器內單個或多個容器的排布問題。若是咱們有一個flex容器，而且其中的item佔據了多行，這時候咱們能夠用到align-content屬性，來控制行與行之間的空間分佈。

align-content要發揮做用，須要容器的高度比各行item的總高度之和要高。

align-content屬性能夠取的值以下：
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly
好比，當align-content取flex-end時，有：