flex(彈性)布局:
2023年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局(ie10)
以往的網頁布局(layout)方式:基於盒模型,依賴display屬性+margin屬性+position屬性+float屬性特殊布局比較麻煩(比如元素的垂直居中)
一.flex是什麼?
flex:flexible box 彈性布局(可以用來給盒子提供最大的靈活性)
任何同期都可以指定為flex布局
.box
webkit核心:加瀏覽器私有字首-webkit
.box
注意:給盒子設定flex屬性之後,子元素的float,clear,vertical-align(垂直方向排列方式)將失效
二.基本概念:
2.1採用flex布局的元素,稱為flex容器(flex container)稱為容器.他的所有子元素自動成為容器的成員,稱為flex專案(flex item)稱為專案.
2.2:容器預設存在兩根軸:水平方向主軸(main axis)和垂直交叉軸(cross axis).主軸的開始位置(與邊框的交點)叫做main start
結束位置叫main end.交叉軸的開始叫做cross start 結束位置叫cross end
2.3:專案(flex item)預設沿主軸排列.單個專案(flex item)佔據的主軸空間叫做main size,所佔據的交叉軸空間叫做cross size
三.容器屬性:6個
3.1flex-direction屬性:(決定主軸的方向:即專案的排列方向)
語法:.box
四個預設值:
row(預設的值):主軸為水平方向,起點在左端
row-reverse:主軸為水平方向,起點在右端
column:主軸為垂直方向,起點在上
column-reverse:主軸為垂直方向,起點在下
3.2:flex-wrap:預設情況下,專案都是排在一條線(軸線)上.而flex-warp屬性定義:如果一條線排不下,如何換行?
語法:.box
三個值:
nowrap:(預設)不換行
wrap:換行,第一行在上方
wrap-reverse:換行第一行在下方
3.3:flex-flow:是flex-direction和flex-wrap屬性的簡寫形式.預設值為:row nowrap
語法:.box
3.4:justify-content:定義專案在主軸上的對齊方式(只跟主軸相關,預設主軸自左向右)
語法:.box
五個值:(假設方向自左向右 row)
flex-start:左對齊(預設)
flex-end:右對齊
center:居中
space-between:兩端對齊專案之間的間隔相等
space-around:每個專案兩側間隔相等,專案之間的間隔比專案與盒子邊框的間隔大一倍
3.5:align-items:定義專案在交叉軸上的對齊方式(只跟交叉軸方向相關:預設自上而下)
語法.box
五個值flex-start:交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center:交叉著的中點對齊
baseline:專案中第一行文字的基線對齊
stretch:(預設)如果專案未設定高或設定為auto,將佔滿整個容器的高度
3.6:align-content:定義多根軸線的對齊方式,如果只有一根軸線該屬性不起作用.
語法:.box
六個值:
flex-start:與交叉軸起點對齊
flex-end:與交叉軸終點對齊
center:與交叉軸中心點對齊
space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布
space-around:每個軸線兩側的間隔相等,所以軸線之間的間隔是軸線與盒子邊框間隔的兩倍
stretch:(預設值)軸線佔滿整個交叉軸
四.專案屬性(flex item)屬性
4.1:order:定義專案的排列順序(數值越小越靠前,主軸開始的方向,預設為0)
語法:.item
4.2:flex-grow:定義專案的放大比例.預設為0.如果存在剩餘空間也不放大.
語法:item
4.3:flex-shrink:定義專案的縮小比例.預設值為1,如果空間不足,該專案將縮小
4.4:flex-basis:定義在分配多餘空間之前,專案所佔的主軸空間(main size).瀏覽器根據這個屬性,計算主軸是否有多餘的空間,預設為auto,即專案本來大小
語法:.item
4.5:flex:是flex-grow,flex-shrink,flex-basis簡寫.預設值是:0 1 auto;
flex:auto;(1 1 auto)
flex:none;(0 0 auto)
4.6:align-self:定義單個專案與其他專案不一樣的對齊方式.可以覆蓋align-items屬性,預設值是auto,表示繼承父元素的align-items屬性.如果沒有父元素等同於stretch
語法:item除了auto以為其他都和align-item一樣
flex布局 彈性盒子
1.display flex inline flex 子元素的float clear和vertical align屬性將失效。flex direction 主軸的方向即專案排列方向 預設row flex wrap 軸線排不下，如何換行 flex flow 預設值為row nowrap justify...
彈性盒子布局 flex布局
彈性盒子布局方式 box 設為flex布局後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 容器...
Flex布局（CSS彈性盒子）
css3彈性盒子 flexible box或flexbox 是一種用於在頁面上布置元素的布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。摘自mdn 使用...