溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS中flex容器與flex屬性的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
flex container（flex容器 或 彈性容器）
flex容器是flex元素的的父元素。 通過設(shè)置display 屬性的值為flex 或 inline-flex定義。
注舊版本的屬性值：
box：將對象作為彈性容器顯示。（最老版本）
inline-box：將對象作為內(nèi)聯(lián)塊級彈性容器顯示。（最老版本）
flexbox：將對象作為彈性容器顯示。（過渡版本）
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性容器顯示。（過渡版本）
flex item（flex子元素 或 彈性子元素）
flex容器的每一個(gè)子元素均為一個(gè)flex子元素。注意：felx容器直接包含的文本變?yōu)槟涿膹椥宰釉亍?/p>
注意：Flexbox布局和原來的布局是2套概念，所以部分css屬性在flex子元素中將不起作用，比如：float, clear , vertical-align , column-*等
軸：
每個(gè)flex子元素沿著主軸（main axis）依次相互排列。交叉軸（cross axis）垂直于主軸。
屬性 flex-direction 定義主軸方向。
屬性 justify-content 定義了flex子元素如何沿著主軸排列。
屬性 align-items 定義了flex子元素如何沿著交叉軸排列。
屬性 align-self 覆蓋父元素的align-items屬性，定義了單獨(dú)的flex子元素如何沿著交叉軸排列。
方向：
flex容器的主軸起點(diǎn)邊緣（main start）、主軸終點(diǎn)邊緣（main end）和 交叉軸起點(diǎn)邊緣（cross start）,交叉軸終點(diǎn)邊緣（cross end）為flex子元素排列的起始和結(jié)束位置。它們具體取決于由writing-mode（從左到右、從右到左等等）屬性建立的向量中的主軸和交叉軸位置。
屬性 order 將元素依次分組，并決定誰先出現(xiàn)。
屬性 flex-flow 是屬性 flex-direction 和 flex-wrap 的簡寫，用于排列flex子元素。
行：
flex子元素根據(jù) flex-wrap 屬性控制的側(cè)軸方向（在這個(gè)方向上可以建立垂直的新線），既可以是一行也可以是多行排列。
尺寸：
flex子元素寬高可相應(yīng)地等價(jià)于主尺寸（main size）和交叉尺寸（cross size），它們都分別取決于flex容器的主軸和側(cè)軸。
min-height 和 min-width 屬性的初始值為新增關(guān)鍵字 auto。
屬性 flex 是 flex-basis，flex-grow 和 flex-shrink 的縮寫，代表flex子元素的伸縮性。
flex屬性
flex（彈性容器中項(xiàng)目的長度）
flex: flex-grow flex-shrink flex-basis/auto/initial/inherit;
flex屬性設(shè)置彈性容器中項(xiàng)目的長度。
flex屬性是flexGrow、flexSHrink、flexBasis屬性的簡寫，即：能夠定義3個(gè)屬性的值。
注意：如果元素不是彈性容器，flex屬性將不會(huì)有效果。
flex的值及其說明
| 值 | 說明 |
|---|---|
| flex-grow的值 | 彈性容器中相對拉伸對象的寬度 |
| flex-shrink的值 | 彈性容器中相對壓縮對象的寬度 |
| flex-basis的值 | 設(shè)定各項(xiàng)目的寬度，可能的值及值得合法單位：
|
| auto | 與1 1 auto相同 默認(rèn)值：0 1 auto |
| none | 與0 0 auto相同 |
| initial | 保持原有屬性的值 |
| inherit | 繼承母元素的設(shè)定。 |
| 默認(rèn)值：0 1 auto 值的繼承：不繼承 JavaScript syntax: object.style.flex="1" | |
使用例：
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#myD {
width: 220px;
height:80px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#myD div {
-webkit-flex: 2; /* Safari 6.1+ */
-ms-flex: 2; /* IE 10 */
flex: 2;
}
</style>
</head>
<body>
<div id="myD">
<div style="background-color:coral;">紅色</div>
<div style="background-color:lightblue;">淺藍(lán)色</div>
<div style="background-color:lightgreen;">綠色及其他內(nèi)容</div>
</div>
</body>
</html>以上是“CSS中flex容器與flex屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼