C3-彈性盒子1

270年前發表於2020-10-22

彈性盒子（ Flexible Box 或 flexbox）

彈性盒子是 CSS3 的一種新的佈局模式，是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子的組成（彈性盒子內可包含一個或多個彈性元素）：

  • 彈性容器(Flex container)
  • 彈性子元素(Flex item)

原先我們製作網頁時，經常會遇到一個容器裡巢狀多個div層，為了讓div層橫向排列，在沒有使用彈性盒子之前我們可以用到的方法為：將需要排列的div層轉換成內聯塊元素（display:inline-block)，或者浮動（ float: left)。

伸縮盒子的優勢：寬度會讓其內容自適應寬度，且兩邊間距不變。不會出現浮動被擠下去的情況。

 

display:flex/ inline-flex

現在有一個新的方法，給需要橫向排列的父元素設定display:flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boxa{
            display: -webkit-flex;
            display: flex;
            width: 800px;
            height: 600px;
            border: 1px solid #000000;    
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #555555;
            margin: 10px 10px;
            text-align: center;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <div class="boxa">
    <div class="box1">a</div>
    <div class="box1">b</div>
    <div class="box1">c</div>
    <div class="box1">d</div>
    <div class="box1">e</div>
    </div>
</body>
</html>

如果需要修改排列方式：則可給body新增direction：rtl (right-to-left)。

flex-direction：屬性指定了彈性子元素在父容器中的位置。

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

 

 

 

 

 

舉慄：

 

 

justify-content：內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊（兩端對齊）。

justify-content的取值
flex-start彈性專案向行頭緊挨著填充。這個是預設值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
flex-end彈性專案向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
center彈性專案居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位）。
space-between彈性專案平均分佈在該行上。如果剩餘空間為負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分佈在該行上，相鄰專案的間隔相等。
space-around彈性專案平均分佈在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有一個彈性項，則該值等同於center。否則，彈性專案沿該行分佈，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

效果圖如下：來源於菜鳥教程 

 

 

align-items ：設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。（不能與justify-content同時出現）

align-items的屬性值
flex-start彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

栗子：stretch(預設值)

flex-start

flex-end

center

 

 baseline 

flex-wrap:用於指定彈性盒子的子元素換行方式

flex-wrap 的屬性值
nowrap預設， 彈性容器為單行。該情況下彈性子項可能會溢位容器。
wrap彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行（換行）

 

wrap-reverse-反轉 wrap 排列

 align-content：用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。

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

 

 

相關文章