flex是flexble box的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。
採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱「容器」。他所有子元素自動成為容器成員，簡稱為 flex 專案（flex item）,簡稱「專案」。
總結flex布局原理：
就是通過給父盒子新增flex屬性，來控制盒子的位置和排列方式
以下有6個屬性是對父元素設定的
在 flex 布局中，是分為主軸和側軸兩個方向，同時的叫法有：行和列、x軸和y軸
flex-direction屬性決定主軸的方向（即專案的排列方向）
注意：主軸和側軸是會變化的，就看flex-direction設定誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的
屬性值說明
row預設值從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
justify-content屬性定義了專案在主軸上的對齊方式
注意：使用這個屬性之前一定要確認好主軸是哪個
屬性值說明
flex-start
預設值從頭部開始 如果主軸是x軸，則從左到右
flex-end
從尾部開始排列
center
在主軸居中對齊（如果主軸是x軸則水平居中）
space-around
平分剩餘空間
space-between
先從兩邊沾邊再平分剩餘空間（重要）
預設情況下，專案都是排在一條線（又稱「軸線」）上。flex-wrap屬性定義，flex布局中預設是不換行的。
屬性值說明
nowarp
預設值，不換行
warp
換行該屬性是控制子項在側軸（預設是y軸）上的排列方式 在子項單項的是時候使用
屬性值說明
flex-start
預設值 從上到下
flex-end
從下到上
center
擠在一起居中（垂直居中）
stretch
拉伸設定子項在側軸上的排列方式並且只能用於子項出現換行的情況（多行），在單行下是沒有效果的。
屬性值說明
flex-start
預設值在側軸的頭部開始排列
flex-end
在側軸的尾部開始排列
center
在側軸中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
stretch
設定子項元素高度平分父元素高度
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex-flow:row wrap;.item預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
div span:nth-child(3)注意：和z-index不一樣。
flex彈性布局基礎
阮一峰的flex布局 flexible box 彈性布局，用來為盒狀模型提供最大的靈活性。採用flex布局的元素成為flex容器，它的所有子元素稱為專案。容器預設兩根軸 水平軸和垂直的交叉軸。整個盒子寬度550px，1,2,3子盒子預設寬高都為100px，然後設定盒子1,2,3的flex grow屬...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...