本人一開始是做移動端原生開發的程式設計師一枚。現在原生開發實在是不咋景氣，公司現在的專案基本上都是前端的專案，所以現在被調到前端，從小白一枚的角度出發分享一部分專案開發過程中用的比較多的知識吧，今天先學習一個flex佈局，這個在專案中用到的實在太多了。

一、介紹

什麼叫做彈性佈局呢，他就是根據內容多少分配多大的控制元件，當內容不足時會自動的換行，去適應父佈局，這也是他最大的好處 由此他可以去適配多種尺寸的頁面。

二、flex結構

咱們先透過網上的一個圖片看一下他的具體結構

其實在這個圖片裡面咱們主要記住是 main axis（主軸）和cross（交叉軸），主軸是內部子元素排列的方向，他可以是水平的也可以是垂直的，而跟主軸垂直的就是交叉軸。

三、flex佈局的相關屬性

flex-direction屬性 設定主軸的方向

他有四個值：

1、row：（預設值）設定主軸為水平方向，子元素排列方向是從左到右。

2、row-reverse：設定主軸為水平方向，子元素排列方向是從右到左。

3、column：設定主軸為垂直方向，子元素排列方向是從上到下。

4、column-reverse：設定主軸為垂直方向，子元素排列方向是從下到上。

具體樣式如圖所示：

flex佈局子元素的排列方向

.flex-container1{  display: flex;  flex-direction:row;}.flex-container2{  display: flex;  flex-direction:row-reverse;}.flex-container3{  display: flex;  flex-direction:column;}.flex-container4{  display: flex;  flex-direction:column-reverse;}

flex-wrap屬性 設定子元素的換行方式

他有三個值：

1、nowrap ：（預設值）不換行 一直往後排（當父佈局空間不足時，也不會換行此時可能就會有內容被遮擋看不見了）。

2、wrap：換行，子元素往後排，當空間不足時會另起一行從新排列。

3、wrap-reverse：換行，跟wrap相似 只是行會從下往上開始。

這個就不展示例項了 大家可以自己試一下

justify-content屬性 （這個比較實用）

表示了子元素在主軸方向上的對齊方式。

他有五個值：

1、flex-start 子元素從左到右排列

2、flex-end 子元素從右到左排列

3、center 子元素居中排列

4、space-between 子元素兩端跟父佈局對齊 子元素直接間距等分

5、space-around 子元素直接間距和兩端跟父佈局間距都等分

具體例項如圖：

給出其中center的程式碼如下：

.flex-container{        display: flex;        justify-content: center; }

align-items屬性 子元素在交叉軸上的排列方式

表示子元素在交叉軸上的排列方式。

他有五個值：

1、flex-start 子元素在交叉軸上從前到後排列

2、flex-end 子元素在交叉軸上從後到前排列

3、center 子元素在交叉軸上居中排列（如垂直居中）

4、baseline 子元素文字的第一行的基線對齊

5、stretch ：（預設值）如果子元素沒有設定高度或auto，那子元素將佔滿父容器的高度。

交叉軸元素的對齊方式

程式碼如下（以中間對齊為例）：  .flex-container1{        display: flex;        flex-direction:row;        align-items: center;    }

好了今天先將這個多，下次繼續講一下這個彈性佈局的其他屬性。這個在實際專案中使用的越來愈多 我也不是從基礎開始講解 我是從在實際專案中使用度較高的地方開始學習和記錄的 如果你也是一個學習前端的同學感覺那些東西在實際專案中用的比較多 你也可以提出來咱們一起學習進步 有講解記錄不對的地方 歡迎大家點出來 我會繼續學習的。