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

搜索

微信公眾號

首頁文章專題 AI工具學習編程手冊下載最近更新

文章 web3.0 后端開發(fā) web前端數(shù)據(jù)庫開發(fā)工具 php框架常見問題科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程自媒體新聞

專題后端開發(fā) web前端數(shù)據(jù)庫開發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程新聞

AI工具 AI 聊天問答 Agent智能體 AI 文本寫作 AI 繪畫作圖 AI 設計工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學習 AI 編程開發(fā) Prompt指令

學習大前端后端開發(fā) 數(shù)據(jù)庫移動端運維開發(fā) UI設計計算機基礎(chǔ)

編程手冊大前端 JavaScript 后端開發(fā) 數(shù)據(jù)庫移動端運維開發(fā) UI設計計算機基礎(chǔ) XML Web Services

下載 js特效網(wǎng)站源碼工具下載類庫下載網(wǎng)站素材學習資源插件擴展手機/移動開發(fā) 手機游戲

flex彈性盒子的使用

如何使用彈性盒子

在CSS中使用display:flex;，即可使元素轉(zhuǎn)為彈性盒子，子元素同時轉(zhuǎn)為彈性元素，會根據(jù)父元素設定的彈性屬性自動排列位置。

代碼實例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex實例</title>
    <style>
      .container {
        width: 300px;
        display: flex;
      }
      .container > .item {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

運行效果：
flex實例

`flex`屬性

調(diào)整整體子元素的屬性

justify-content:控制所有項目在主軸上的對齊方式
屬性值：

justify-content: flex-start; /*起點對齊*/
justify-content: flex-end;/*結(jié)束對齊*/
justify-content: center;        /*居中對齊*/
justify-content: space-between;  /*兩端對齊，中間剩余空間平均分配*/
justify-content: space-around; /*分散對齊,項目兩側(cè)全部平均分配*/
justify-content: space-evenly; /*分散對齊，剩余空間平均分配*/

align-content：多行容器項目排列方式

注意，使用多行容器前必須設置flex-wrap:wrap，意思是將彈性盒子設置為多行。

align-content: stretch;/*默認，以元素自身寬度或高度以主軸順序?qū)R，根據(jù)元素數(shù)量自動填滿交叉軸空間*/
align-content: flex-start;/*以主軸方向的起始位順序?qū)R，忽略原元素交叉軸方向大小值，只取項目內(nèi)容值的大小來顯示項目*/
align-content: flex-end;/*以主軸方向的結(jié)尾處開始前前對齊，忽略原元素交叉軸方向大小值*/
align-content: center;/*以主軸方向排列，并以交叉軸方向居中對齊,忽略原元素交叉軸方向大小值*/
/* 2. 容器剩余空間在所有項目“之間”的如何分配 ，將項目視為一個個獨立的個體*/
align-content: space-between;/*兩端對齊，中間剩余空間平均分配*/      
align-content: space-around;/*分散對齊,項目兩側(cè)全部平均分配*/
align-content: space-evenly;/*分散對齊，剩余空間平均分配*/

align-items：交叉軸項目排列方式


     /* 項目在交叉軸上默認是自動伸縮的 */
     align-items: stretch;
     /* 項目在交叉軸起始位對齊排列 */
     align-items: flex-start;
     /* 項目在交叉軸結(jié)尾處對齊排列 */
      align-items: flex-end;
      /* 項目在交叉軸上居中 */
     align-items: center;

order：控制項目順序


   .container > .item:first-of-type {
     /* order: 將第一個項目移動到第三個項目的位置上 */
     order: 3;
   }

彈性盒子應用實例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>利用flex制作導航</title>
    <style>
      /* 初始化 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: #ccc;
      }
      nav {
        height: 40px;
        background-color: #333;
        padding: 0 50px;
        /* 轉(zhuǎn)為彈性盒布局 */
        display: flex;
      }
      nav a {
        height: inherit;
        line-height: 40px;
        padding: 0 15px;
      }
      nav a:hover {
        background-color: seagreen;
        color: white;
      }
      /* 登錄/注冊放在最右邊 */
      nav a:last-of-type {
        margin-left: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <a href="">首頁</a>
        <a href="">教學視頻</a>
        <a href="">社區(qū)問答</a>
        <a href="">資源下載</a>
        <a href="">登錄/注冊</a>
      </nav>
    </header>
  </body>
</html>