亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 18
粉絲 0
評論 0
訪問量 14952
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
210324 CSS flex 布局
xyphpblog
原創(chuàng)
786人瀏覽過

flex布局

主要組成

  • 容器 (container)
  • 項目 (flex items)
  • 主軸 (main axis)
  • 交叉軸 (cross axis)

1. 設(shè)置容器

使用flex布局，先設(shè)置容器為flex容器，容器的子元素自動變?yōu)槿萜鞯捻椖?，且為行?nèi)塊級元素

  1.    <style>
  2.         .container {
  3.             /* 轉(zhuǎn)為flex布局，該元素即為flex容器 */
  4.             display: flex;
  5.             height: 20rem;
  6.         }
  7.     </style>
  8.     ---------------------------------------------------------------
  9.     <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.         <div class="item">item4</div>
  15.         <div class="item">item5</div>
  16.         <div class="item">item6</div>
  17.         <div class="item">item7</div>
  18.         <div class="item">item8</div>
  19.     </div>
  20. </body>

2. 容器換行

  • 設(shè)置為單行容器，不換行
  1.        .container {
  2.             /* 主軸方向： 默認水平 */
  3.             /* flex-direction: row; */
  4.             /* 禁止換行 */
  5.             /* flex-wrap: nowrap; */
  6.             /* 簡化寫法 */
  7.             flex-flow: row nowrap;
  8.         }

  • 設(shè)置為多行容器，允許換行
  1.        .container {
  2.             /* 允許換行 */
  3.             /* flex-flow: row wrap; */
  4.             /* 垂直換行 */
  5.             flex-flow: column wrap;
  6.         }

3. 對齊方式

設(shè)置項目在主軸對齊（主軸有剩余空間）

方式 1： 所有項目作為整體處理

  • justify-content: flex-start;
  • justify-content: flex-end;
  • justify-content: center;

flex-start

flex-end

center

方式 2：項目作為個體處理

  • justify-content: space-between
  • justify-content: space-around
  • justify-content: space-evenly

space-between

space-around

space-evenly

設(shè)置項目在交叉軸對齊

方式 1： align-items
設(shè)置flex子項在每個flex行的交叉軸上的默認對齊方式

  • align-items: stretch (默認,若子元素設(shè)置高度則無效，因為高度屬性覆蓋stretch)
  • align-items: flex-start
  • align-items: flex-end
  • align-items: center

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

方式 2：align-content
適用多行的flex容器（也就是flex容器中的子項不止一行時該屬性才有效果），它的作用是當(dāng)flex容器在交叉軸上有多余的空間時，將子項作為一個整體（屬性值為：flex-start、flex-end、center時）進行對齊

  • align-content: stretch(默認,若子元素設(shè)置高度則無效，因為高度屬性覆蓋stretch)
  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: space-evenly

align-content: stretch

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: space-evenly

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)