常用開發布局之flex布局 常用屬性

在之前我也寫過一篇flex布局的一篇文章，flex新增屬性。可以看下，剛開始第一次接觸flex布局時寫的，現在看看感覺有一點籠統，不是很清晰。但是裡面解釋了很多基礎知識，還是值得看的。今天再來縷縷常用的父項屬性和子項屬性。

**上來，裡面有詳細的解釋

flex-deriction:控制主軸的正方向

row：主軸是x軸,預設值 row-reverse

column: 主軸是y軸 column-reverse

justify-content:控制子元素在主軸上的排列方式

flex-start:從主軸的頭部開始排列

flex-end:從主軸的尾部開始排列

center:在主軸居中對齊

space-around:分配剩餘的富裕空間

space-between:先兩邊貼邊，再分配剩餘的富裕空間

flex-wrap:控制子元素是否換行

nowrap：不換行

wrap：換行

align-items:設定側軸子元素的排列方式  容器是單行

flex-start:從側軸的頭部開始排列

flex-end:從側軸的尾部開始排列

center:在側軸居中對齊

strech：拉伸 使用時子元素不能設定高度

align-content:設定側軸子元素的排列方式 容器有多行

flex-start:從側軸的頭部開始排列

flex-end:從側軸的尾部開始排列

center:在側軸居中對齊

space-around:分配剩餘的富裕空間

space-between:先兩邊貼邊，再分配剩餘的富裕空間

flex-flow:flex-deriction flex-wrap 的簡寫屬性

flex-wrap：nowrap 不換行時，子元素的寬度會自動變小。設定換行的話寬度正常，第二張圖

align-items：center  單行水平垂直居中

align-content：center  多行水平垂直居中

flex:屬性 子元素分配剩餘富裕空間，指佔剩餘空間的多少份數

屬性值是數字，代表佔富裕空間的份數

預設為 0 

flex：是flex-grow、flex-shrink、flex-basis三個屬性的簡寫。

flex-grow：擴充套件比例。預設0

flex-shrink：收縮比例。預設1

flex-basis：基準值。預設auto

align-self:控制子元素自身在側軸上的排列方式

flex-start:從側軸的頭部開始排列

flex-end:從側軸的尾部開始排列

center:在側軸居中對齊

align-self：flex-end  我試了一下，如果有align-content的話，再設定這個屬性，就會失效。這個屬性用的比較少，了解一下。

ok，今天的flex布局思路完畢了，明天開始做案例。

晚安了。

flex布局（常用

flex注意點 1 當父盒子設定display flex 子元素的float clear vertical align都會失效 2 採用flex布局的元素，稱為flex容器 flex container 而其中的子元素成為專案 flex item 3 設定flex之後，其子元素都變為行內塊元素，可設...

移動開發布局 flex

flex flow 3.flex布局子項常見屬性 當我們為父盒子設為flex布局以後，子元素的float clear和vertical align都會失效 伸縮布局 彈性布局 伸縮盒布局 彈性盒布局 flex布局 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex dir...

CSS布局flex布局常用屬性

display flex使用flex布局首先要設定父容器 水平方向 justify content flex start 起始端對齊 justify content flex end 末尾段對齊 justify content center 居中對齊 justify content space ar...