CSS3圖解伸縮性佈局

CSS3伸縮性佈局

flex

父盒子 section 需添加 伸縮佈局模式 display: flex;

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>

子盒子 div添加分數 flex

section div:nth-child(1) {
    background-color: pink;
    flex: 1;/*子盒子添加分數flex:1;不加單位*/
}
section div:nth-child(2) {
    background-color: rgb(255, 231, 93);
    flex: 2;
}
section div:nth-child(3) {
    background-color: rgb(135, 241, 103);
    flex: 3;
}
section div:nth-child(4) {
    background-color: rgb(104, 228, 250);
    flex: 1;
}

效果如圖

flex簡寫—> flex: flex-grow、flex-shrink、flex-basis
默認值—> flex: 0 1 auto;

flex:1 相當於

flex-grow: 1;
flex-shrink: 1;
flex-basis: 1;

flex-grow —>可以來擴展子元素的寬度,設置當前元素應該佔據剩餘空間的比例值
flex-shrink —>定義收縮比例,通過設置值來計算收縮空間
flex-basis —>規定元素的基準值

flex-direction —>設置子元素的排列方向:主軸方向
默認主軸方向是row(水平方向):
：row(水平排列方向,從左到右)
：row-reverse(水平排列方向從右到左)
：column（設置主軸方向爲縱向，垂直顯示）
：column-reverse（與 column 相同，但是以相反的順序）
父盒子添加flex-direction: row-reverse; 實現倒排

flex-wrap —>控制子元素是否換行顯示,默認不換行
：nowrap(不換行)
：wrap(換行)
：wrap-reverse(翻轉,原來從上到下,翻轉後從下到上排列)
父盒子添加flex-wrap:wrap-reverse實現翻轉

flex-flow —>flex-wrap和flex-direction的結合
父盒子添加flex-flow: wrap-reverse row-reverse 倒排+翻轉

控制子項目的排列順序: order
order---->正序方式排列,從小到大(可以爲負數),例order：1;

justify-content

：flex-start（起始位置開始排列）
：flex-end（行尾對齊位置開始排列)
：center（中點位置開始排列，行首和行尾的距離相同）
：space-between（行首行尾分別左右對齊，中間相鄰元素產生相同間距)
：space-around（中間的間距是行首的邊距和行尾的邊距的兩倍)
：space-evenly（flex項都沿着主軸均勻分佈在指定的對齊容器中，相鄰flex項之間的間距都完全一樣)

align-content （針對flex容器裏面多軸(多行)的情況 ）

：flex-start（從起始點開始放置 flex元素）
：flex-end（從終止點開始放置 flex元素)
：center（將項目放置在中點）
：space-between（均勻分佈項目，第一項與起始點齊平，最後一項與終止點齊平）
：space-around（均勻分佈項目，項目在兩端有一半大小的空間）
：space-evenly（均勻分佈項目，項目周圍有相等的空間）
：stretch（默認值，均勻分佈項目，拉伸‘自動’-大小的項目以充滿容器）

align-items （針對一行的情況進行排列）

：stretch（默認值，元素被拉伸以適應容器，側軸大小的屬性值爲’auto’時，則會使項目的邊距盒的尺寸儘可能接近所在行的尺寸）
：baseline（文本基線對齊）
：flex-start（側軸方向上頂對齊）
：flex-end（側軸方向上底對齊）
：center（側軸方向上中對齊）

align-self

align-self 屬性定義在 flex子項單獨 在側軸（縱軸）方向上的對齊方式。
注意：align-self 屬性 可重寫 靈活容器的 align-items 屬性。
：auto（默認值，元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則爲 “stretch”）
：baseline（元素位於容器的基線上）
：stretch（元素被拉伸以適應容器）
：flex-start（側軸方向上頂對齊）
：flex-end（側軸方向上底對齊）
：center（側軸方向上中對齊）