引用自
定義容器的display屬性：
.box容器樣式
.boxflex-direction值介紹如下：
row: 預設值。靈活的專案將水平顯示，正如乙個行一樣。
row-reverse: 與 row 相同，但是以相反的順序。
column: 靈活的專案將垂直顯示，正如乙個列一樣。
column-reverse: 與 column 相同，但是以相反的順序。
flex-wrap 值介紹如下:
nowrap: flex容器為單行。該情況下flex子項可能會溢位容器。
wrap: flex容器為多行。該情況下flex子項溢位的部分會被放置到新行，子項內部會發生斷行。
wrap-reverse： 換行並第一行在下方
flex-flow值介紹如下(主軸方向和換行簡寫)：
: 定義彈性盒子元素的排列方向
：控制flex容器是單行或者多行。
justify-content值介紹如下：
flex-start: 彈性盒子元素將向行起始位置對齊。
flex-end: 彈性盒子元素將向行結束位置對齊。
center: 彈性盒子元素將向行中間位置對齊。
space-between: 第乙個元素的邊界與行的主起始位置的邊界對齊，同時最後乙個元素的邊界與行的主結束位置的邊距對齊，
而剩餘的伸縮盒專案則平均分布，並確保兩兩之間的空白空間相等。
space-around: 伸縮盒專案則平均分布，並確保兩兩之間的空白空間相等，同時第乙個元素前的空間以及最後乙個元素後的空間為其他空白空間的一半。
align-items值介紹如下:
flex-start: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline: 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch: 如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
align-content值介紹如下:
flex-start: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
space-between: 第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，
剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等。
space-around: 各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。
stretch: 各行將會伸展以占用剩餘的空間。如果剩餘的空間是負數，該值等效於'flex-start'。在其它情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。
子元素屬性
.item
盒子模型總結
對比標準盒子模型中 定義的width,只包含content部分的寬度,如果增加盒子的padding和border,會增加盒子所佔的整體寬度 ie盒子模型中 定義的width,是包含content的跨度,還有左右兩側的padding還有border 相容處理 1 ie瀏覽器文件注釋 通過上述方法,在不...
盒子模型總結
盒子模型 盒子模型分為標準盒子模型和ie盒子模型 標準盒子模型 標準盒子模型分為margin，border,padding,content,其中content部分不包含其他部分，對應height部分 ie盒子模型 ie盒子模型包含margin，border，padding，和content，其中co...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...