先前有介紹過float屬性，但是在現在這個有flex的時代，flex漸漸取代float成為排版神器。

Flex 是 display中新增的配置之一，能夠對被設定為Flex區塊內的內容做排版，在Flex之中，不論是垂直或水平的對齊、排列、順序甚至是大小都可以簡單完成。

那就不囉嗦直接上程式碼:

HTML

<div class="container">
        <div class="box-1">A</div>
        <div class="box-2">B</div>
        <div class="box-3">C</div>
</div>

CSS

.container{
         width: 100%;
         color: white;
         font-size: 40px;
         text-align: center;
         line-height: 200px
}
.box-1{
         width: 200px;
         height: 200px;
         background-color: #000;            
}
.box-2{
         width: 200px;
         height: 200px;
         background-color: #f00;
}
.box-3{
         width: 200px;
         height: 200px;
         background-color: #0f0;
}

這應該會是我們目前的排列組合，有一個容器裡面放了三個盒子

那接下來我們在這個container容器加上flex這個屬性，在給每個盒子一點margin比較好辨識

.container{
            width: 100%;
            color: white;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
            display: flex;
        }
        .box-1{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 10px;            
        }
        .box-2{
            width: 200px;
            height: 200px;
            background-color: #f00;
            margin: 10px;
        }
        .box-3{
            width: 200px;
            height: 200px;
            background-color: #0f0;
            margin: 10px;
        }

你完全不用考慮，是的!它們就會併排了。這個屬性太讚了新手一大福音!

設定flex這個屬性的元素會變成一個彈性盒子flexbox，裡面的子元素會變成彈性項目。

當在 display 屬性宣告 flex，如果沒有設定寬高，可以看到彈性盒子像block一樣佔據了整行。

然後這些彈性項目脫離了他和標籤的關係，這些標籤都成了彈性項目。

所以div也不會像block要佔據一整行，a和span也擺脫了沒有尺寸的inline屬性。

我覺得flex這個屬性跟inline-block的容易混淆的地方在於設定的位置。

先提一下，上面這個案例container這個div就是父層元素，而包在裡面的box-1 box-2 box-3都是子層元素

• flex屬性設定在父層元素，主要操作子層元素的排列位置。
• inline-block屬性直接設定在元素本身就可以有效果。

那接下來說一下flex有哪些屬性可以設定，可以讓我們去針對排版使用。

flex-direction

這個屬性可以決定你的子層元素流向，有四種屬性可以使用:

• row
• row-reverse
• column
• column-reverse

在MDN上的解釋是不會稱為水平或是垂直，通常都是用主軸跟切軸來表示:

• 主軸:跟隨著彈性項目順序的軸。

• 切軸:垂直於主軸的軸。

這個屬性的預設值主軸就是row(列)相交軸就是column(欄)

所以如果今天想要主軸是column(欄)相交軸是row(列)

那就要使用flex-direction:column。

這邊說一下有人是欄跟列會記不清楚的嗎?
偷偷分享一個小技巧(欄)就是直的因為它是木字旁，木是直的。我是這樣記住的

那來講講 row-reverse跟 column-reverse好了!

這兩個值可以讓你資料流向轉換主軸跟切軸，還會有反向的效果。

.container {
				width: 100%;
				color: white;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
				display: flex;
				flex-direction: row-reverse;
}

.container {
				width: 100%;
				color: white;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
				display: flex;
				flex-direction: column-reverse;
}

今天的介紹先到這邊，對於其他可以設定的屬性會在後面的文章再跟大家說明!

參考文獻

[Day04] Flexbox 基本認識