css中的flex用法

2024-04-27 15:07:53

字體：大中小

來源：轉載

供稿：網友

一、flexible box，彈性布局任何一個容器都可以指定為flex布局：.box{ display: flex}行內元素也可以使用Flex布局： .box{ display: inline-flex;}webkit內核的瀏覽器，必須加上-webkit前綴 .box{ display: -webkit-flex; /*Safari*/ display: flex;}注意，設為flex布局以后，子元素的float、clear和vertical-align屬性將失效二、基本概念采用Flex布局的元素，稱為flex容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，稱為flex項目（flex item），簡稱“項目”。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end ；交叉軸的開始位置叫做cross start，結束位置叫做cross end項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size三、容器的屬性.box一下6個屬性設置在容器上。flex-direction: row|row-reverse|column|column-reverse;決定主軸的方向（即項目排列方向）row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。flex-wrap: nowrap | wrap | wrap-reverse; 默認情況下，項目都排在一條線（又稱“軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。flex-flow: <flex-direction> || <flex-wrap>是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrapjustify-content: flex-start | flex-end | center | space-between（兩端對齊，項目之間的間隔相等） | spac-around；定義了項目在主軸上的對齊方式align-items： flex-start | flex-end | center | baseline | stretch；定義項目在交叉軸上如何對齊align-content： flex-start | flex-end | center | space-between | space-around | stretch；定義多跟軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。四、項目的屬性.item一下6個屬性設置在項目上orderflex-growflex-shrinkflex-basisflexalign-selforder屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。.item { order: <integer（整數）>; }flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。.item { flex-grow: <number>; }如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性值為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。flex-shrink屬性定義了項目的縮小比例，默認為1，即空間不足，該項目將縮小。.item { flex-shrink: <number>;}如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目為1，則空間不足時，前者不縮小。負值對該屬性無效。flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。.item { flex-basis: <length> | auto; }它可以設為跟width或height屬性一樣的值，則項目將占據固定空間。flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。.item { flex： none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}該屬性有兩個快捷值： auto（1 1 auto）和none （0 0 auto）建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。align-self屬性align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }代碼示例如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>繼承父類</title><style>span {color: blue;border: 1px solid black;}.extra span {color: inherit;}#main {width: 400px;height: 150px;border: 1px solid #000000;display: flex;justify-content: flex-end;}#main div {width: 70px;height: 70px;flex: flex-grow;}</style></head><body><div>這里是一個藍色的<span>span 元素</span>，正如span元素所設置的。</div><div class="extra" style="color: green">這里是一個綠色的<span>span 元素</span>，因為它繼承了父元素。</div><div style="color:red">這里是一個藍色的<span>span 元素</span>，正如span元素所設置的。</div><div id="main"><div style="background-color: coral;"></div><div style="background-color: lightblue"></div><div style="background-color: khaki"></div><div style="background-color: pink"></div></div><p>點擊“嘗試一下”按鈕，設置justifyContent屬性的值為“space-between”。</p><button onclick="myFunction()">嘗試一下</button><script>function myFunction(){document.getElementById("main").style.justifyContent = "space-between";}</script><p><b>注意：</b>Internet Explorer、Firefox 和 Safari 不支持 justifyContent 屬性。</p></body></html>效果圖如下：

上一篇：C2engine：降臨，移動視界未來已來

下一篇：Understanding ES6學習筆記