Flex佈局

時間 2019-12-23

標籤 flex 佈局欄目 Flex 简体版

原文原文鏈接

flex佈局

將固定的像素大小轉換爲彈性比例大小

公式：結果 = 目標/上下文 即 元素大小除以元素所在的容器

彈性佈局能夠作到什麼

方便垂直居中內容
改變元素的視覺次序
在盒子裏自動插入空白及其對其元素，自動對其元素間的空白

自從有了flex，float已經能夠說是後孃養的了。css

那麼問題來了，如何實現flex佈局html

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                display: flex;
            }
            
        </style>
    </head>
    <body>
        <div class="flex"></div>
    </body>
</html>

如上面代碼，元素設置了display: flex時，就是一個彈性盒子了。佈局

在彈性盒子裏的塊級元素，排成了一行，就如同行內元素同樣，和使用float沒啥區別。flex

但要注意的是父元素設置了flex後，子元素的float、clear、ertical-align屬性將失效。spa

最後行內元素也能夠設置flex，不必定要塊級元素。code

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                display: flex;
                background: pink;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: skyblue;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

結下了咱們稱定義了display: flex爲flex容器，而其子元素叫作flex項目htm

主軸和側軸

默認狀況下主軸就是橫軸，屬性是justify-content，側軸就是縱軸，屬性是align-itemsutf-8

看下這兩個屬性的值it

justify-content
- flex-start：
  彈性項目向行頭緊挨着填充。這個是默認值。其實就是左對齊
- flex-end：
  彈性項目向行尾緊挨着填充。其實就是右對齊。
- center：
  居中對齊（若是剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
- space-between：
  兩邊對齊，彈性項目平均分佈在該行上。若是剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。不然，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，而後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。
- space-around：
  彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。若是剩餘空間爲負或者只有一個彈性項，則該值等同於center。不然，彈性項目沿該行分佈，且彼此間隔相等（好比是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
align-items
- flex-start：上對齊。
- flex-end：下對齊
- center：垂直居中。（若是該行的尺寸小於彈性盒子元素的尺寸則會向兩個方向溢出相同的長度）。
- baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
- stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

那麼用flex佈局來實現水平垂直居中對齊就很簡單了io

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                
                justify-content: center;
                align-items: center;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: skyblue;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            
        </div>
    </body>
</html>

注意：橫軸和縱軸這兩個屬性是寫在flex容器裏的，不是寫在flex項目的。

能夠試着改變橫軸和縱軸的屬性值，看子元素的位置變化，能夠更好的瞭解flex佈局

flex-direction

這個是決定哪一個是主軸，以前默認的主軸就是橫軸

row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

試下改變代碼中flex-direction的屬性值，看子元素的變化

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                flex-direction: column;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                
            }
            .flex div:nth-child(1){
                background: green;
            }
            .flex div:nth-child(2){
                background: skyblue;
            }
            .flex div:nth-child(3){
                background: brown;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

注意：若是你將主軸設置爲column或column-reverse，那麼屬性align-items表明的就是水平的，而屬性justify-content是垂直的。其實也就是和默認的主軸反過來了，具體用法和以前主軸爲橫軸是同樣的。

align-self

用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。（容許單個子元素與其餘子元素不同的對齊方式）

以前的例子來看，子元素都是被統一管理，居中就所有都居中，這個屬性就是讓某些元素，可以和其餘元素有不同的對其方式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                justify-content: center;
                align-items: center;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;

            }
            .flex div:nth-child(1){
                background: green;
            }
            .flex div:nth-child(2){
                background: skyblue;
            }
            .flex div:nth-child(3){
                background: brown;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

上面這段代碼，子元素都水平垂直居中了，接下來要讓第一個子元素，在上方。

改變CSS代碼

.flex div:nth-child(1){
    background: green;
    align-self: flex-start;
}

order

項目的排列順序，越小，排列越靠前

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                justify-content: center;
                align-items: center;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;

            }
            .flex div:nth-child(1){
                background: green;
                order: 2;
            }
            .flex div:nth-child(2){
                background: skyblue;
                order: 3;
            }
            .flex div:nth-child(3){
                background: brown;
                order: 1;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

flex屬性

flex 屬性用於指定彈性子元素如何分配空間。

flex：int  數值表明該子元素所佔據的比例大小

flex是三個屬性的融合

flex-grow定義彈性盒子元素的擴展比率。
flex-shrink 定義彈性盒子元素的收縮比率。空間不足時
flex-basis定義彈性盒子元素的默認基準值。

接下來看這段代碼

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: #000;
            }
            .flex div:nth-child(1){
                background: green;
            }
            .flex div:nth-child(2){
                background: skyblue;
            }
            .flex div:nth-child(3){
                background: brown;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

這時候我想讓這三個子元素等比例，佔滿父容器，只要添加flex: 1便可，這個樣式也能夠寫成flex-grow: 1

改變關鍵CSS代碼

.flex div{
    width: 100px;
    height: 100px;
    margin: 10px;
    flex: 1;
    background: #000;
}

以前關於flex的代碼都是寫在父元素上的，這個flex屬性要寫在子元素裏

接下來再看另外一段代碼

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: #000;
            }
            .flex div:nth-child(1){
                background: green;
            }
            .flex div:nth-child(2){
                background: skyblue;
            }
            .flex div:nth-child(3){
                background: brown;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        
        </div>
    </body>
</html>

子元素的div變多了，並且寬度被壓縮了，如何讓寬度保持不變，添加flex-shrink，讓其值爲0

改變CSS代碼

.flex div{
    width: 100px;
    height: 100px;
    margin: 10px;
    flex-shrink: 0;
    background: #000;
}

而後發現一個問題，子元素過多，超過了父級元素，溢出了，這時候就要換行。

flex-wrap

用於指定彈性盒子的子元素換行方式

nowrap 默認，彈性容器爲單行。該狀況下彈性子項可能會溢出容器。
wrap彈性容器爲多行。該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse 反轉 wrap 排列。

那麼這時只要在flex容器設置這個屬性就好了

.flex{
    height: 500px;
    display: flex;
    background: pink;
    
    flex-wrap: wrap; 
}

align-content

用於修改 flex-wrap 屬性的行爲。相似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。

若是是正常操做，這時候的頁面子元素應該排成兩行了，這個屬性能夠將每一行看作一個flex項目

stretch - 默認。各行將會伸展以佔用剩餘的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分佈。
space-around - 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。

.flex{
    height: 500px;
    display: flex;
    background: pink;
    flex-wrap: wrap;
    
    align-content: space-around;
}

flex容器與flex項目

做用在flex容器的屬性

flex-direction
justify-content
align-items
align-content
flex-wrap
flex-flow 這個實際上是flex-direction 和 flex-wrap的複合屬性，因此上面並無說到

flex項目的屬性

align-self
flex
order

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。