flex布局的核心概念是軸和容器，容器包括外層的父容器和內層的子容器，軸包括主軸（預設水平）和交叉軸（預設垂直）。
一、開啟flex布局
父容器設定屬性值： display: flex;
若父容器為行內元素： display: inline-flex;
webkit核心的瀏覽器： display: -webkit-flex;
二、父容器可以統一設定子容器的排列方式，子容器也可以單獨設定自身的排列方式，如果兩者同時設定，以子容器的設定為準。
1.父容器的屬性：
(1)設定主軸的方向：flex-direction
row: 預設值，主軸為水平方向從左到右；
row-reverse: 主軸為水平方向從右到左；
column: 主軸為垂直方向從上到下；
column-reverse: 主軸為垂直方向從下到上
(2)設定子容器沿主軸的排列方式：justify-content
flex-start: 預設值，起始端對齊
flex-end: 末尾端對齊
center: 居中對齊
space-around: 子容器沿主軸均勻分布，位於首尾兩端的子容器到父容器的距離是子容器間距的一半
space-between: 子容器沿主軸均勻分布，位於首尾兩端的子容器與父容器相切
(3)設定子容器沿交叉軸排列：align-items（單行）
flex-start: 預設值，起始端對齊
flex-end: 末尾端對齊
center: 居中對齊
baseline：基線對齊，這裡的baseline預設是指首行文字，即first baseline，所有子容器向基線對齊，交叉軸起點到元素基線距離最大的子容器將會與交叉軸起始端相切以確定基線。
stretch：子容器沿交叉軸方向的尺寸拉伸至與父容器一致
(4)設定換行方式：flex-wrap
nowrap: 不換行
wrap: 換行
wrap-reverse: 反向換行
(5)軸向(flex-direction )與換行(flex-wrap)組合設定：flex-flow
(6)多行沿交叉軸對齊：align-content--設定換行才生效
flex-start: 起始端對齊
flex-end: 末尾端對齊
center: 居中對齊
space-around: 等邊距均勻分布
space-between: 等間距均勻分布
stretch: 拉伸對齊
2.子容器的屬性：
(1)在主軸上如何伸縮：flex
flex 屬性的值可以是無單位數字（如：1, 2, 3），也可以是有單位數字（如：15px，30px，60px），還可以是 none 關鍵字。子容器會按照 flex 定義的尺寸比例自動伸縮，如果取值為none 則不伸縮。
(2)單獨設定子容器沿交叉軸排列：align-self
flex-start: 起始端對齊
flex-end: 末尾端對齊
center: 居中對齊
baseline: 基線對齊
stretch: 拉伸對齊
(3)設定基準大小：flex-basis
flex-basis表示在不伸縮的情況下子容器的原始尺寸。主軸為橫向時代表寬度，主軸為縱向時代表高度（覆蓋width和height）。
(4)設定擴充套件比例：flex-grow--子容器彈性伸展的比例 預設值為0
(5)設定收縮比例：flex-shrink--子元素彈性收縮的比例 預設值為1
(6)設定排列順序：order
改變子容器的排列順序，覆蓋 html **中的順序，預設值為 0，可以為負值，數值越小排列越靠前
flex布局中的flex屬性詳解
一 理論 display flex 容器屬性 flex direction，flex wrap，flex flow，justify content，align items，align content 專案的屬性 order，flex grow，flex shrink，flex basis，flex，...
flex布局的常見屬性
主軸與側軸 flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有 行和列 x軸y軸 常見的父項屬性 flex direction 設定主軸的排列方向 子元素事是跟著主軸來排列的 row 預設值從左向右 row reverse 從右向左 column 從上到下 column reverse 從下到上...
Flex 布局 容器屬性
flex 布局，意為 彈性布局 任何乙個容器都可以指定為 flex 布局，行內元素也可以使用 flex 布局。注意 設為 flex 布局後，子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素，稱為 flex 容器，簡稱容器 它的所有子元素自...