flex佈局原理

flex佈局原理

flex是flexible Box的縮寫，意為“彈性佈局”，用來為盒裝模型提供最大的靈活性，任何一個容器都可以指定為flex佈局。（在flex下眾生平等）

• 在使用flex佈局之後，子元素的float（浮動），clear（清除浮動）和vertical-align屬性將失效
• 伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局

採用flex佈局的元素，稱為flex容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，稱為flex專案（flex item）簡稱“專案”。

總結：flex佈局就是通過給父盒子新增flex屬性，來控制子盒子的位子和排列方式。

重點=重點=重點：給父盒子新增flex屬性。

flex佈局常見的屬性

flex父級新增的屬性：

1. flex-direction:設定主軸的方向。

flex-direction：決定主軸的方向
注意：主軸和側軸是會發生變化的，就看flex-direction設定誰為主軸，剩下的為側軸，而且我們的子元素是根據主軸來排列的。
屬性：
row：從左到右（預設）
row-reverse：從右到左
column：從上到下
column-reverse:從下到上

2. justify-content設定主軸上的子元素排列方式。

justify-content設定主軸上的子元素排列方式
屬性：
flex-start：從頭部開始，如果主軸是X,則從左到右（預設）
flex-end：從尾部開始排列
center:在主軸居中對齊（如果主軸是X軸則水平居中）
space-around：平分剩餘空間
space-between：先兩邊貼邊，在平分剩餘空間（重點）

3. flex-wrap:設定子元素是否換行。

flex佈局中是預設不換行的。如果裝不開，會縮小子元素的寬度，放到父元素裡面。
屬性：
nowrap:(預設)不換行
wrap：換行

4. align-content：設定側軸上的子元素的排列方式（多行）。

設定子項在側軸上的排列方式，並且只能使用於子項出現換行的情況（多行），在單行中是不能使用的。
屬性：
flex-start：在側軸的頭部開始排列（預設）
flex-end：在側軸的尾部開始排列
center：在側軸中間顯示
space-around：子項在側軸平分剩餘空間
space-between：子項在側軸先分佈在兩頭，在平分剩餘空間
stretch：設定子項元素高度平分父元素高度

5. align-items：設定側軸上的子元素排列方式（單行）。

該屬性是控制子項在側軸上的排列方式，在子項為單項的時候使用。
屬性：
flex-start：從上到下（預設）
flex-end：從下到上
center：擠在一起居中（垂直居中）
stretch：拉伸

6. flex-flow：複合屬性，相當於同時設定了flex-direction和flex-wrap。

flex-flow屬性就是flex-direction和flex-wrap屬性的複合屬性
flex-flow：row warp;(沿著Y軸換行)

flex佈局中子項常見屬性

• flex屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。（重點）

  .item{
  flex:<數字>/default 0/
  }

• align-self:控制子項自己在側軸上的排列方式

• order：屬性定義專案的排列順序（數值越小，排列越靠前，預設為0）注意：和z-index不一樣。