初識flex布局

彈性布局

彈性布局是一種當頁面需要适應不同的螢幕大小以及裝置類型時確定元素擁有恰當的行為的布局方式。使用方法：父元素設定

display:flex

注意：父元素屬性設定了flex布局其子元素的float,clear,vertical-align将無效

常用屬性（父元素/容器））

flex-direction:設定主軸方向
justify-content:設定主軸上的子元素排列方式
flex-wrap:設定子元素是否換行
align-content:設定側軸上的子元素的排列方式（多行）
align-items:設定側軸上的子元素排列方式（單行）
flex-flow:複合屬性，相當于同時設定了flex-direction,flex-wrap

主軸與側軸

在flex布局中，分為主軸和側軸兩個方向，也叫做行和列，x軸和y軸

預設主軸方向是x軸水準向右
預設側軸方向是y軸垂直向下

flex-direction設定主軸方向通過flex-direction設定誰為主軸，剩下的就是側軸，而我們的子元素（項目）就是跟着主軸來排列的

row：預設值（x軸）
row-reverse ：x軸元素從右到左排列（與row相反）
column：從上到下
column-reverse：從下到上（與column相反）

flex-direction 調整子元素的排列方向（預設水準方向row）column(垂直)

.main{
            width:400px;
            height:300px;
            border:1px solid red;
            margin: 0 auto;
            display: flex;
            flex-direction:column;//
        }

複制

justify-conten設定主軸上的子元素排列方式

flex-start 預設值從頭部開始，如果主軸是x軸側從做到右
flex-end 與flex-start相反
center 在主軸居中對齊（如果主軸是x軸側水準居中）
space-around 平分剩餘空間
space-between |左右的盒子貼近父盒子，中間的平均分布空白間距

space-between左右的盒子貼近父盒子，中間的平均分布空白間距

space-around每個盒子平均配置設定父元素留下的左右間距

align-items:設定側軸上的子元素排列方式（單行）*

stretch預設，使子元素的高度拉伸填充父容器（在子元素不指定高度的情況）
flex-start頂部對齊
flex-end底部對齊
center垂直居中

flex-warp控制是否換行

nowwap不換行（壓縮形式顯示）
wrap自動換行
wrap-reverse自動換行（以相反的順序）

align-content設定側軸上的子元素排列方式（多行）前提：必須設定父元素display:flex flex-direction:row

stretch使子元素的高度拉伸填充父容器（在子元素不指定高度的情況）
center垂直居中
flex-start頂部對齊
flex-end底部對齊
space-between左右的盒子貼近父盒子，中間的平均分布空白間距
space-around每個盒子平均配置設定父元素留下的左右間距

center

space-around

flex-flow 該屬性是flex-direction和flex-wrap屬性的複合屬性

/*主軸方向x,超過換行*/
flex-flow:row wrap

複制

子元素屬性

order:設定元素排列順序，值越小排在最前，預設0
flex-grow num:定義子元素的放大比例;如果父元素還有剩餘空間，可指定相應子元素占滿父元素空間
flex-shrink:定義子元素的縮小比例; 如果父元素空間不夠，可指定相應子元素縮小相應比例。預設自動
flex flex-grow和flex-shrink的複合屬性,簡單了解為占多少份
anign-self：設定單個子元素的對齊方式

值	描述
center	垂直居中
flex-start	頂部對齊
flex-end	底部對齊

注意： Internet Explorer 和 Safari 浏覽器不支援 align-self 屬性。