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

<ul id="0sw4m"></ul><ul id="0sw4m"></ul>

搜索

微信公眾號

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

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

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

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

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

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

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

Flex布局：

Flex容器屬性：

1、 flex-direction:row/colum:主軸方向，默認主軸為行，
2、 flex-wrap:nowrap/wrap;默認不換行
3、 flex-flow:簡寫direction和wrap;
4、 justify-content:flex-start/center/flex-end和space-between/space-evenly/space-around;
主軸上項目對其方式和排列方式
5、 align-items:flex-start/center/flex-end；項目在交叉軸上的對其方式
6、 align-content: space-between/space-evenly/space-around: 項目在交叉軸上的排列方式

Flex項目屬性：

1、 order:為項目編號（int）,值越小越靠前排列，無order設置的項目在最前面
2、 flex-grow/shrink/basis: grow/shrink的值為比例分配：0~1； basis:項目占據的主軸空間。簡寫：flex:0,0 auto;
3、 aglin-self:某個特定項目的對齊方式；值為：flex-start、center、flex-end;

代碼演示：

代碼部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 500px;
        height: 300px;
        display: flex;
        background-color: #c3c3c3;
        /* flex-direction: column-reverse; */
        /* flex-wrap: wrap; */
        /* flex-flow: column nowrap; */
        /* justify-content:默認值 */
        /* justify-content: flex-start; */
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: space-between; */
        justify-content: space-evenly;
        /* justify-content: space-around; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        align-items: center;
        align-content: space-between;
        align-content: space-around;
        align-content: space-evenly;
      }
      .box {
        width: 200px;
        height: 100px;
        background-color: #ff8080;
        text-align: center;
        line-height: 100px;
        outline: 1px solid #008000;
        /* flex-basis: 200px; */
        /* flex-grow: 1; */
        /* flex-shrink: 1; */
        /* flex: 0 1 auto; */
        flex: auto;
      }
      .box:first-child {
        background-color: #00ff00;
        order: 1;
        align-self: flex-start;
      }
      .box:nth-child(2) {
        order: 3;
        align-self: flex-end;
      }
      .box:nth-child(3) {
        order: 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
    </div>
  </body>
</html>

演示結果：

總結：

1、flex相關屬性歸類總結：

	屬性	描述
基礎屬性	flex-flow:direction wrap;	flex項目排列方向和是否換行
布局屬性	主軸：justify-content屬性；副軸：align-content(分散方式)和align-items（對齊方式）	項目在容器中的布局方式
項目屬性	align-self:對齊方式；flex:項目彈性設置；order項目排次方式	子元素相關設置

2、flex布局是響應布局常用的方式，重點在于justify-content和align-items|content屬性的設置影響整體布局；
3、項目元素在于flex和align-self、order的使用;主要用于子元素的微調，順次排列；
4、flex相關屬性的簡寫是掌握難點，需重點記憶和熟練練習；
5、另外需要注意的就是，相關屬性疊加設置的效果，是以后使用和調正過程需要重點關注的；

批改老師：