flex布局,即為彈性布局,其為盒模型提供最大的靈活性,任何乙個容器都可以指定為flex布局。
eg:.box{
display:flex;
行內元素也可以使用flex布局。
注意:設定flex布局後,子元素的float、clear和vertical-align屬性將會失效。
採用flex布局:
元素:稱為flex容器,他的所有子元素自動成為容器成員,稱為flex專案,
容器預設存在兩根軸,水平的主軸(main axis)和垂直的交叉軸(cross axis)主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;
同理也存在cross start和cross end;
專案沿主軸排列單個專案佔據的主軸空間叫做main size,佔據的交叉軸空間叫做cross size;
一、容器的屬性:
1.flex-direction:決定主軸的方向
row:主軸為水平方向,起點在左側;
row-reverse:。。。。。。起點在右側;
column:主軸為垂直方向,起點在上沿;
column-reverse:。。。。起點在下沿;
2.flex-wrap:預設所有專案排列在一條軸線上,而該屬性是定義如果一條軸線排不下,如何進行換行
nowrap:不換行;
wrap:換行,第一行再上方;
wrap-reverse:換行,第一行在下方;
3.flex-flow:是-direction和-wrap的縮寫
預設值為: row nowrap;
4.justify-cotent:定義了專案在主軸上的對齊方式
flex-start:左對齊;
flex-end:右對齊;
center:居中對齊;
space-between:兩端對齊,專案之間間隔等距;
space-around:每個專案兩側等間隔,所以專案間的間隔要比專案和邊框的間隔大;
5.align-items:定義專案在交叉軸的對齊方式
flex-start:交叉軸的起點對齊;
flex-end:交叉軸的終點對齊;
center:交叉軸的中點對齊;
baseline:專案的第一行文字的基線對齊;
stretch預設值:如果專案未設定高度或者設定為auto,將佔滿整個容器的高度;
6.align-cotent:定義了多根軸線的對齊方式,如果專案只有一根軸線則該屬性無效
flex-start:與交叉軸的起點對齊;
flex-end:與交叉軸的終點對齊;
center:。。中點。。;
space-between:與交叉軸兩端對齊,軸線之間的間隔等距;
space-around:每根軸線的兩側距離相等,所以軸線之間的距離比邊框與軸線之間的距離大一倍;
stretch預設值:軸線佔滿整個交叉軸;
二、專案的屬性
1.order:定義專案的排列順序,數值越小,排列越靠前,預設為0;
2.flex-grow:定義專案的放大比例,預設為0,即如果存在剩餘空間也不能放大;
3.flex-shrink:定義專案的縮小比例,即空間不足,該專案將縮小;
4.flex-basis:在分配的多餘空間之前,專案佔據主軸的空間,瀏覽器根據此屬性計算主軸是否有多餘空間,預設為auto,即為專案本來的大小;
5.flex:是-grow、-shrink、basis的縮寫,預設值為0,1,auto,該屬性有兩個快捷值,auto(1,1,auto)和none(0,0,auto);
6.align-self:允許單個專案與其他專案不一樣的對齊方式,可覆蓋align-items屬性,預設值為auto,表示繼承父元素的align-items,如無父元素則等同於stretch,該屬性除了auto值外,其餘的屬性含義等同於align-items;
flex布局學習筆記
布局的傳統解決方案,基於盒狀模型,依賴display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便,比如,垂直居中就不容易實現。新的方案 flex 布局,可以簡便 完整 響應式地實現各種頁面布局 flex flexible box 的縮寫,彈性布局,任何乙個容器都可以指定為...
Flex布局學習筆記
flex 是flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。webkit 核心的瀏覽器,必須加上 webkit字首。注意,設為 flex 布局以後,子元素的float clear和vert...
flex布局 學習筆記
一 講解作業 二 z index用於設定定位元素顯示的層級 預設定位後的元素會在普通文件元素之上顯示,那麼如何做到讓定位後的元素顯示在文件的下方呢?設定z index的值即可 z軸概念 水平的x軸和垂直的y軸構成了乙個面,而z軸則就是垂直這個面。z index作用 z index屬性其作用就為設定乙...