在css中，可以使用flex來做一維布局的排版，所以今天要來探討和flex相關的屬性。Flex可以說是css的一個盒子模型，利用外面那一層來控制盒子裡面的排列狀況，假設我們的盒子叫做.wrapper，而裡面的物件叫做.item。在.wrapper包覆的盒子和flex有關的屬性如下: display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。
而關於裡面被排列的元素有order、align-self、flex-basis、flex-grow、flex-shrink這些屬性。首先先來介紹設定在外層盒子.wrapper的屬性。
Display: flex
讓裡面的物件強迫擠在同行，預設的情況是flex-wrap: nowrap，因此可以使用flex-wrap來調整。這個將在後面介紹。
flex-direction
共有row,column, row-reverse,column-reverse可以做調整，預設值是row表示水平的排列，column表示垂直的排列，而row-reverse和column-reverse表示從後面的物件開始排列，這裡要注意row-reverse，包覆item的class如果是撐滿的情況，會從最右邊開始，如果外層有設定高度的話，也會從底部開始排列喔!
flex-wrap
定義你所使用的容器類型。依據item在超過容器寬度的時候會不會換行，分成single-line單行以及multi-line多行。
flex-wrap: no-wrap(預設): 不希望東西溢出，強迫不換行。定義下的flex容器是single-line。
flex-wrap: wrap: 不希望東西溢出，強迫換行。定義下的flex容器是multi-line。
flex-wrap: wrap-reverse: 將wrap後的順序顛倒，定義下的flex容器是multi-line。
提醒:
在display: flex裡面，預設為flex-wrap: no-wrap，強迫不換行。但這裡需要注意到，如果外層是固定寬度，裡面的內容物給定min-width: 100px，而不是單純的width: 100px，內容物的確不換行，不過會超出外面的框框，這是因為寬度給了最小寬度，所以會以最小寬度為優先。
flex-flow
可以把flex-direction和flex-wrap寫在一起，例如flex-flow: column wrap。
justify-content
justify-content 表示水平排列的情況，共分為下列幾種:
flex-start(預設值): 對齊起點。
center: 對齊中間。
flex-end: 對齊最後面。
space-around:把剩下的空間平均分配，邊邊空間是一般空間的一半。
space-between: 最邊邊不會留空間，剩下空間平均分配。
space-evenly: 最邊邊會留空間，把剩下的空間平均分配。
align-items
aligh-items 表示垂直排列的情況，配合單行(single line)的排列下所使用的垂直排列(多行的垂直排列為align-content)，數值和justify-content有些不同，共有flex-start、 center 、flex-end 、baseline(根據line-height設定高度來對齊)、stretch(作為預設值，稱滿全部的高度)。
align-content
和align-items很像，只能在flex屬性為multi-line(wrap或是wrap-reverse)的情況下產生作用。數值和justify-content相同，預設值為stretch。
以上就是關於外層設定的基本介紹，接下來要來介紹被排列的item設定的屬性。
order
用於排列裡面的物件給於排序，數字依照小到大排列，所有的預設值是0，如果要設定排在比較前面可以設定-1，排在比較後面則設定1，如果有比較多物件要設定，可以設定不同數字。
align-self
用於排列裡面的物件做客製化的排列，如果該item不同於其他的對齊方式，就可以再設定align-self，表示自己的對齊方式。數值和align-items的種類一樣。
flex-basis
在參與排列之前給定它的大小，為子元素基本大小，預設為auto，也可以直接給數值。
flex-grow
在排列時可能會遇到容器大小比item本身還要大的情況，那些剩下的空皆可以藉由設定flex-grow來分配掉，表示要不要參與剩下空間的分配(膨脹分配)。
0(預設):表示不參與膨脹分配。
1: 表示參與膨脹分配。
flex-shrink
和flex-grow相反，當外面的容器比item小的時候，要不要參與被縮減的空間的比例分配。
0: 保持本身大小。
1(預設): 參與被縮減的空間比例分配。
以上就是有關一維flexbox分配相關的css屬性設定，可以來底下的codepen連結玩看看playground，可以更加瞭解!
然後發現有一個練習排列的互動網站，可以上去練習讓印象更深刻喔!
