flex的使用相當的普遍與實用,特別是現在有手機,平板,筆電,桌電等等不同螢幕尺寸的機器,因此設計出來的畫面常會要對各種不同尺寸的螢幕做考量。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: 1 1 150px
flex: 0 1 150px
flex-wrap可以設定當母元素的大小無法塞下子元素時,超出的子元素是否要換到下一行顯示。預設是不換行,若是要換行,則於母元素的style中設定。
.container-flex-wrap {
display: flex;
flex-wrap: wrap;
}
flex-wrap: nowrap | wrap | wrap-reverse;
wrap-reverse:超出的子元素會往上換一行顯示。
flex-direction是指定拉伸收縮的方向。可以指定 row(預設) , column 兩種方向,搭配反轉組合,所以一共有四種設定。
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 的幫助後,當畫面大小有變化後,可以很容易的設計出想要的效果,特別是一個手機跟桌面瀏覽器都能適當地顯示的網頁。以前都是套用一些現有的css框架或套件來做到響應式設計對其使用方式仍是覺得既神奇又難以掌握,現在自己也能使用flex稍微的做出一些調整還符合自己的需求。