CSS Flex

前言

今天要来讲的是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;