1.flex是flexible box的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性
2.任何乙個容器都可以用flex布局（注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效）
採用flex布局的元素，稱為flex容器（flex container），簡稱」容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size
5.容器的屬性有6個
#1. flex-direction
作用是決定主軸的方向
.box
有4個值
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿
# 2.flex-wrap屬性
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box
有3個值
nowrap（預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
# 3.flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形
預設值為row nowrapjustify-content屬性定義了專案在主軸上的對齊方式
.box
它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從
左到右flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔
比專案與邊框的間隔大一倍。
# 5.align-items屬性定義專案在交叉軸上如何對齊。
.box
flex布局常用樣式
flex容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis flex 左對齊 頂對齊 flex flex 左右居中，上下居中 flexcenter flex column 垂直居中布局 flexclsdirectcolumn flexclsdirectcolum...
flex布局以及原理
flex是 flexible box的縮寫,意為彈性布局,用來為盒狀模型提供最大的靈活性,任何乙個容器都可以指定為flex布局 當我們為父盒子設為flex布局以後,子元素的loat clear和 vertical align 屬性將失效.伸縮布局 彈性布局 伸縮盒布局 彈性盒布局 flex布局 採用...
樣式布局flex的使用
說到頁面布局，無外乎水平垂直，先說說水平，最開始使用最多的是float屬性，但是它有後遺症，塌陷呀清除呀，最後放棄轉戰flex。需要謹記的是，flex是設定在需要生效的元素的父元素上面的。display flex flex direction row column 其中row為水平布局，column...