前言

Hi大家，你们在切版时都惯用哪个做排版工具呢？一直以来我都使用Float，对于现在主流的Flex, Grid对我来说算是新的技术，虽然说在我的第三篇文章，有简单提到Flex外容器与内元件属性。但就实际实做及玩CSS Flex的游戏，发现有些还是不太理解，无法很快的去判断要下什么属性值，学习上好吃力，但内心却又有着不服输的精神，所以重听Flex课程，再次学习justify-content, align-items, align-items... 脑袋突然晃过这个画面。对，它好像这个Adobe软体使用到的「对齐」属性。(过去工作最熟悉的工具软体)，以下是我的手绘理解图↓↓↓↓，下文将各个元素说明。

Flex 属性

Flex有外容器与内元件属性，各别有不同的属性值。以下依外容器到内元件属性依序说明。

外容器

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

display 属性

.flex-container {    display: flex ;}

flex ：一开始要宣告为 flex 才能使用。inline-flex：作用类似于 inline-block + flex。

flex-direction 属性

flex-direction 属性决定轴线的排列方向，可以将轴线做水平、水平反转、转为垂直、垂直反转等。

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

row （预设）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

超出範围时是否换行的属性，分为换行、不换行、换行时反转。预设的值为 nowrap 不换行。若指定 flex-wrap 为 wrap 换行，那超过宽度的区块就会自动被挤到下一行。

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

nowrap（预设）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。

flex-flow 属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的缩写，预设值为row nowrap。

.flex-container {    flex-flow: <'flex-direction'> || <'flex-wrap'> }

justify-content

justify-content 属性主要是设定 Flexbox 内的元素水平对齐(依主轴)的设定，主轴的设定是依照 flex-direction；所以实际是水平或垂直，要依主轴的方向而定。对齐内的资料流分为起点、终点、置中，还有平均分配空白区域：

.flex-container {    justify-content: flex-start | flex-end | center | space-around | space-between;}

flex-start（预设值）：靠左对齐flex-end：靠右对齐center： 居中space-between：平均分配，但两端靠容器边对齐，item 间隔都相等。space-around：平均分配，每个元素间距都会一致。。

例如 flex-direction 设定为 row-reverse，资料从右流到左，设定 flex-end 时，Flex 内的 item 会靠向资料流结束的那边：

align-items

这是交错轴的对齐设定。

.flex-container {    align-items: flex-start | flex-end | center | baseline | stretch;}

flex-start（预设值）：次轴靠上对齐flex-end：次轴靠下对齐center： 居中stretch：元素被拉伸以应应容器。

align-content

这是次轴对齐的属性(多行版本)。

.flex-container {    align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

以上是初级生在第一次学习flex所领域到的学习及理解的。
若有不对之处，还请各位大大给我建议。我会虚心学习。

下一篇将会补齐内元件的元件，及第二次学习后的笔记整理。

鼠年全马铁人挑战发文连结:
[鼠年全马铁人挑战] Day 1- 参加前言
[鼠年全马铁人挑战] Day 2-网页排版笔记: 修练前的宝物
[鼠年全马铁人挑战] Day 3-网页排版笔记: 一份完整的作品所需要的元素
[鼠年全马铁人挑战] Day 4-网页排版笔记: jQuery 超入门笔记