CSS入門：學習flex的使用方法

flex的使用相當的普遍與實用，特別是現在有手機，平板，筆電，桌電等等不同螢幕尺寸的機器，因此設計出來的畫面常會要對各種不同尺寸的螢幕做考量。flex就特別適用於這樣的場合，可以隨著螢幕大小的變化來對頁面中的元素做伸縮設定。

Table of Contents

• CSS中的flex
• 調整子元素的伸縮設定
• flex-wrap
• flex-direction
• flex-flow
• flex-direction, flex-wrap, flex-flow例子
• 感想

CSS中的flex

當一個HTML元素設定為 flex 後，為了讓其裡面子元素能完全被包容，可以設定子元素做伸長或收縮的方式。

舉例來說，

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>
<style>
.item {
  background-color: lightblue;
  margin: 5px;
  padding: 5px;
}
</style>

每一個項目(item)佔據一行。 若是將最外面的元素設為flex，可以把所有項目都集中在一行。

設定 flex元素 的方式如下，

.container{
  display:flex;
}

調整子元素的伸縮設定

母元素的style中設定了display:flex後，子元素的style中就可以對flex來做伸縮設定。

flex: (flex-grow) (flex-shrink) (flex-basis)

參考：https://developer.mozilla.org/ja/docs/Web/CSS/flex

• flex-grow： 伸長的設定
• flex-shrink: 收縮的設定
• flex-basis: 基本大小的設定

例如以下設定有拉伸與不拉伸的效果。

• 拉伸: flex: 1 1 150px
• 不拉伸: flex: 0 1 150px

flex-wrap

flex-wrap可以設定當母元素的大小無法塞下子元素時，超出的子元素是否要換到下一行顯示。預設是不換行，若是要換行，則於母元素的style中設定。

.container-flex-wrap {
  display: flex;
  flex-wrap: wrap; 
}

flex-wrap: nowrap | wrap | wrap-reverse;

wrap-reverse：超出的子元素會往上換一行顯示。

flex-direction

flex-direction是指定拉伸收縮的方向。可以指定 row(預設) , column 兩種方向，搭配反轉組合，所以一共有四種設定。

• row(預設) : 左至右設置元素
• row-reverse : 右至左設置元素
• column : 上至下設置元素
• column-reverse : 下至上設置元素

flex-flow

flex-flow是可以一次設定 flex-direction，flex-wrap的方式。

flex-flow: (flex-direction) (flex-wrap)

例如：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

可以用 flex-flow 一次搞定。

.container {
  display: flex;
  flex-flow: row wrap;
}

flex-direction, flex-wrap, flex-flow例子

感想

有了 flex 的幫助後，當畫面大小有變化後，可以很容易的設計出想要的效果，特別是一個手機跟桌面瀏覽器都能適當地顯示的網頁。以前都是套用一些現有的css框架或套件來做到響應式設計對其使用方式仍是覺得既神奇又難以掌握，現在自己也能使用flex稍微的做出一些調整還符合自己的需求。