css3中的彈性布局也叫flex布局，它是我們現在主要用的布局方式之一；
它的優點就是方便快捷，有更大的靈活性
彈性盒子包括：彈性容器和彈性子元素，彈性容器dispaly:flex; 彈性子元素flex item
容器屬性：
1.換行 flex-wrap:wrap;
nowrap 預設 不換行，所有子元素都擠到容器中，設定寬度無效
wrap 換行， 達到一定寬度多出來 換行
2.方向 flex-direction
row 預設 橫向排列
column 縱向排列
row-reverse 橫向反向排列
column-reverse 縱向反向排列
3.專案在主軸排列方式 justify-content
flex-start 水平靠左，橫向反向靠右
flex-end 水平靠右，橫向反向靠左
space-between 兩端靠邊，中間平分
space-around 兩邊距離相等，中間平分，兩邊距離值是中間距離值的一半
4.專案在交叉軸排列方式 align-items
baseline 預設以文字基線對齊（參照文字基線） 在
某種情況下與flex-start效果相似
flex-start 橫向靠上 縱向靠右
center 居中
flex-end 橫向靠下 縱向靠右
5.軸線之間排列方式 align-content
flex-start 水平靠上，縱向反向靠下
flex-end 水平靠下，縱向反向靠上
center 居中
space-between 上下靠邊，中間平分
space-around 上下距離相等，中間平分，上下距離是中間的一半
stretch 不能給子項設定高度 拉伸至父級
子元素屬性 專案自身設定
1.排序 order
order:1/2/3/4/5;
order:-1;將此項提到第一位
2.flex 設定收縮/擴充套件比率
3.專案自身上設定的縱軸排列方式 align-self
baseline 如果align-itmes設定baseline,align-self受
到影響，如果沒設定與flex-start相似
flex-start 水平靠上，垂直靠右
flex-end 水平靠下，垂直靠右
center 居中
stretch 拉伸至父級
設定專案佔比：flex佔比 flex:1|1|auto;
flex布局 彈性布局
使用彈性布局時不能使用浮動float,clear,vertical-align 使用無效，定位可以使用
移動端使用彈性盒子時
html,body{
width:100%;
height:100%;
CSS3彈性布局flex
彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。彈性容器內包含了乙個或多個彈性子元素。注意 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素...
CSS3 彈性布局 flex
彈性布局 彈性布局又稱彈性盒子，伸縮盒子，是css3中的有一種布局方法，主要用來代替浮動float來完成頁面布局 可以使元素具有彈性，可以根據瀏覽器視窗的大小，進行自適應的放大縮小。要使用彈性布局，就必須先將乙個元素設定為彈性容器 我們可以通過 display 來設定彈性容器 display fle...
css3彈性方塊布局 Flex
css3彈性方塊布局 flex 比較適合移動端的使用，下面是各瀏覽器的相容情況 先說一下自己的理解。剛開始看到這個就有點懵，怎麼一會是box，一會是flexbox，一會又是flex，到底是什麼鬼東西！其實他們只是不同版本的寫法而已 2009 version 標誌 display box or a p...