小編給大家分享一下CSS中flex容器與flex屬性的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
flex container（flex容器 或 彈性容器）
flex容器是flex元素的的父元素。 通過設置display 屬性的值為flex 或 inline-flex定義。
注舊版本的屬性值：
box：將對象作為彈性容器顯示。（最老版本）
inline-box：將對象作為內聯塊級彈性容器顯示。（最老版本）
flexbox：將對象作為彈性容器顯示。（過渡版本）
inline-flexbox：將對象作為內聯塊級彈性容器顯示。（過渡版本）
flex item（flex子元素 或 彈性子元素）
flex容器的每一個子元素均為一個flex子元素。注意：felx容器直接包含的文本變為匿名的彈性子元素。
注意：Flexbox布局和原來的布局是2套概念，所以部分css屬性在flex子元素中將不起作用，比如：float, clear , vertical-align , column-*等
軸：
每個flex子元素沿著主軸（main axis）依次相互排列。交叉軸（cross axis）垂直于主軸。
屬性 flex-direction 定義主軸方向。
屬性 justify-content 定義了flex子元素如何沿著主軸排列。
屬性 align-items 定義了flex子元素如何沿著交叉軸排列。
屬性 align-self 覆蓋父元素的align-items屬性，定義了單獨的flex子元素如何沿著交叉軸排列。
方向：
flex容器的主軸起點邊緣（main start）、主軸終點邊緣（main end）和 交叉軸起點邊緣（cross start）,交叉軸終點邊緣（cross end）為flex子元素排列的起始和結束位置。它們具體取決于由writing-mode（從左到右、從右到左等等）屬性建立的向量中的主軸和交叉軸位置。
屬性 order 將元素依次分組，并決定誰先出現。
屬性 flex-flow 是屬性 flex-direction 和 flex-wrap 的簡寫，用于排列flex子元素。
行：
flex子元素根據 flex-wrap 屬性控制的側軸方向（在這個方向上可以建立垂直的新線），既可以是一行也可以是多行排列。
尺寸：
flex子元素寬高可相應地等價于主尺寸（main size）和交叉尺寸（cross size），它們都分別取決于flex容器的主軸和側軸。
min-height 和 min-width 屬性的初始值為新增關鍵字 auto。
屬性 flex 是 flex-basis，flex-grow 和 flex-shrink 的縮寫，代表flex子元素的伸縮性。
flex屬性
flex（彈性容器中項目的長度）
flex: flex-grow flex-shrink flex-basis/auto/initial/inherit;
flex屬性設置彈性容器中項目的長度。
flex屬性是flexGrow、flexSHrink、flexBasis屬性的簡寫，即：能夠定義3個屬性的值。
注意：如果元素不是彈性容器，flex屬性將不會有效果。
flex的值及其說明
| 值 | 說明 |
|---|---|
| flex-grow的值 | 彈性容器中相對拉伸對象的寬度 |
| flex-shrink的值 | 彈性容器中相對壓縮對象的寬度 |
| flex-basis的值 | 設定各項目的寬度，可能的值及值得合法單位：
|
| auto | 與1 1 auto相同 默認值：0 1 auto |
| none | 與0 0 auto相同 |
| initial | 保持原有屬性的值 |
| inherit | 繼承母元素的設定。 |
| 默認值：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;">淺藍色</div>
<div style="background-color:lightgreen;">綠色及其他內容</div>
</div>
</body>
</html>以上是“CSS中flex容器與flex屬性的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
