Web應用課 2.4 CSS——flex、響應式佈局

安河桥北i發表於2024-06-20
WebCSSFlex

flex佈局

主軸方向 flex-direction

CSS flex-direction 屬性指定了內部元素是如何在 flex 容器中佈局的，定義了主軸的方向(正方向或反方向)。

/* 文字排成行的方向 */
flex-direction: row;

/* 類似於 <row>，但方向相反 */
flex-direction: row-reverse;

/* 文字排成列的方向 */
flex-direction: column;

/* 類似於 <column>，但方向相反 */
flex-direction: column-reverse;

/* 全域性值 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;

是否換行 flex-wrap

CSS 的 flex-wrap 屬性指定 flex 元素單行顯示還是多行顯示。如果允許換行，這個屬性允許你控制行的堆疊方向。

flex-wrap: nowrap; /*單行 Default value */
flex-wrap: wrap;/*多行*/
flex-wrap: wrap-reverse;/*從下往上多行顯示*/

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: unset;

擺放順序 flex-flow

CSS flex-flow 屬性是 flex-direction 和 flex-wrap 的簡寫。預設值為：row nowrap。

主軸對齊方式 justify-content

/* Positional alignment */
justify-content: center; /* 水平居中排列 */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* 從行首起始位置開始排列 */
justify-content: flex-end; /* 從行尾位置開始排列 */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */
justify-content: space-between; /* 兩端對齊 */
justify-content: space-around; /* 均勻排列每個元素每個元素周圍分配相同的空間 */
justify-content: space-evenly; /* 均勻排列每個元素
                                   每個元素之間的間隔相等 */
justify-content: stretch; /* 均勻排列每個元素
                                   'auto'-sized 的元素會被拉伸以適應容器的大小 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

交叉軸豎向對齊方式 align-items

它控制子元素在交叉軸上的對齊。

  • flex-start：元素向主軸起點對齊。
  • flex-end：元素向主軸終點對齊。
  • center：元素豎直居中。
  • stretch：彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度。

align-content

CSS 的 align-content 屬性設定了瀏覽器如何沿著彈性盒子佈局的縱軸和網格佈局的主軸在內容項之間和周圍分配空間。

  • flex-start：所有行從垂直軸起點開始填充。第一行的垂直軸起點邊和容器的垂直軸起點邊對齊。接下來的每一行緊跟前一行。
  • flex-end：所有行從垂直軸末尾開始填充。最後一行的垂直軸終點和容器的垂直軸終點對齊。同時所有後續行與前一個對齊。
  • center：所有行朝向容器的中心填充。每行互相緊挨，相對於容器居中對齊。容器的垂直軸起點邊和第一行的距離相等於容器的垂直軸終點邊和最後一行的距離。
  • stretch：拉伸所有行來填滿剩餘空間。剩餘空間平均地分配給每一行。

案例：實現水平和豎直居中

.div-flex{
    width: 50%;
    height: 500px;
    background-color: lightgray;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;/*元素水平居中*/
    align-items: center;/*元素豎直居中*/
    text-align: center;/*文字水平居中*/
}

order 順序

定義flex專案的順序，值越小越靠前。

案例：讓奇數塊排在偶數塊的前面

.div-flex-item{
    width: 100px;
    height: 100px;

}

.div-flex-item:nth-child(odd){
    background-color: lightpink;
    order: 1;
}

.div-flex-item:nth-child(even){
    background-color: lightgreen;
    order: 2;
}

flex-grow 拉伸

CSS 屬性 flex-grow CSS 設定 flex 項主尺寸 的 flex 增長係數。
負值無效，預設為 0。

flex-shrink 縮小

CSS flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在預設寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。
負值無效，預設為1。

flex-basis 初始寬度

CSS 屬性 flex-basis 指定了 flex 元素在主軸方向上的初始大小。
取值：
width 值可以是length; 該值也可以是一個相對於其父彈性盒容器主軸尺寸的百分數 。負值是不被允許的。預設為 auto。

flex三屬性縮寫 flex-grow、flex-shrink、flex-basis的縮寫

常用取值：

auto：flex: 1 1 auto /*隨著父元素自動延伸和縮小*/
none：flex: 0 0 auto /*不延伸也不縮小*/

響應式佈局 適應不同裝置螢幕，如手機，平板，電腦

media查詢 當螢幕寬度滿足特定條件時應用css

@media(min-width: 768px) {
    .container {
        width: 960px;
        background-color: lightblue;
    }
}

示例：螢幕寬度大於768顯示青色，否則顯示紫色

/*大於768的螢幕認為寬屏，小於認為small*/
@media (min-width: 768px){
    .card{
        background-color: aquamarine;/*大於768的螢幕顯示青色，小於顯示紫色*/
    }
}

示例：柵格化佈局

相關文章