前言

今天要來講的是Flex 彈性盒子~，優勢就是快速的水平垂直排版、置中，又可以適應不同的螢幕尺寸，讚讚。

Flex Container

把元素設定為flex，他就會變成flex Container ，同時也變成了塊級元素。

<div style="display:flex;">
  
</div>

Flex item

在 flex Container 裡面的元素就是Flex item。

<div styl="display:flex;">
  <div>flex item 1</div>
  <div>flex item 2</div>
  <div>flex item 3</div>
</div>

Alex(軸)

在Flex中分成了主軸跟次軸，可分別設定他們的排版。

flex-direction

設定主軸的排版。
設定主軸為橫向排版時~

flex-direction:row;

垂直排版時

flex-direction:column;

其餘的排版方式還有以下就自己去測試囉

flex-direction: row-reverse;
flex-direction: column-reverse;

justify-content

設定主軸的內容物要如何排版~
內容物依靠起始位置時

justify-content:start;

內容物置中~

justify-content:center;

除此之外還有

justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

align-items

設定次軸的排版
貼近起始位置~

align-items:start;

置中~

align-items:center;