flex是flexble box的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。
採用flex布局的元素，稱為flex容器（flex container），簡稱「容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案「。
flex布局的原理就是通過給父盒子新增flex屬性（display: flex），來控制子盒子的位置和排列方式。子容器可以橫向排列也可以縱向排列。
以下6個屬性是對父元素設定的：
下面對上述的6個屬性作一一介紹：
flex-direction：flex-direction屬性決定主軸的方向，即專案的排列方向。
注意：主軸和側軸是會變化的，就看flex-direction設定誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的。
屬性值說明
row預設值，從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
justify-content：justify-content屬性定義了專案在主軸上的對齊方式。
注意：使用這個屬性之前一定要確定好主軸是哪個。
屬性值說明
flex-start
預設值，從頭部開始，如果主軸是x軸，則從左到右排列
flex-end
從尾部開始排列
center
在主軸居中對齊（如果主軸是x軸，則水平居中）
space-around
平分剩餘空間
space-between
先兩邊貼邊，再平分剩餘空間（重要）
flex-wrap：在flex布局中，預設的子元素是不換行的，專案都排在一條線上，如果裝不下，會縮小子元素的寬度。
屬性值說明
nowrap
預設值，不換行
wrap
換行align-items：該屬性是控制子項在側軸（預設是y軸）上的排列方式，在子項為單行的時候使用
屬性值說明
flex-start
預設值，從上到下
flex-end
從下到上
center
垂直居中（擠在一起居中）
stretch
拉伸align-content：設定子項在側軸上的排列方式，並且只能用於子項出現換行的情況（即多行顯示），在單行下是沒有效果的。
屬性值說明
flex-start
預設值，從側軸的頭部開始排列
flex-end
從側軸的尾部開始排列
center
在側軸中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
stretch
設定子項元素高度平分父元素的高度
align-items和align-content的區別：
flex-flow：該屬性是flex-direction和flex-wrap屬性的復合屬性
flex-flow: row wrap;flex布局子項常見屬性：
下面對上述的3個屬性作一一介紹：
flex：該屬性定義子專案分配剩餘空間，用flex來表示佔多少份
.itemalign-self：該屬性允許單個專案有與其他專案不一樣的對齊方式，可以覆蓋align-items屬性。
預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
span:nth-child(2)下面介紹乙個常見的flex布局思路：
CSS布局之彈性布局
flex 彈性布局 是一種響應式布局，能自動伸縮盒模型達到自適應的效果。彈性布局由彈性容器 flex container 和彈性專案 flex item 組成。在彈性容器中，水平方向稱為主軸 main axis 起點main start,終點main end 垂直方向稱為縱軸 cross axis ...
css布局之彈性布局flex
作用 彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。彈性布局是定義在乙個父容器中，加上display flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float clear和vert...
移動端 彈性盒子布局
1.基本概念 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的縱軸 cross axis 主軸的開始位置 與邊框的交叉點 ...