简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex布局理解

flex布局理解

▽空城旧梦
▽空城旧梦原创
2021年03月26日 11:48:56566浏览

flex布局 多行

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性盒子</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       html {
  15.         font-size: 10px;
  16.       }
  17.       body {
  18.         font-size: 1.6rem;
  19.       }
  21.       .container {
  22.         display: flex;
  23.         height: 20rem;
  24.         /* width: 5em; */
  25.         boreder: 1px solid black;
  26.       }
  28.       .container > .item {
  29.         width: 10rem;
  30.         background-color: chartreuse;
  31.         border: 1px solid black;
  32.       }
  34.       /* 默认 */
  35.       .container {
  36.         flex-flow: row wrap;
  37.       }
  39.       /* .container {
  40.         flex-flow: row wrap;
  41.       } */
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="container">
  46.       <item class="item">item1</item>
  47.       <item class="item">item2</item>
  48.       <item class="item">item3</item>
  49.       <item class="item">item4</item>
  50.       <item class="item">item5</item>
  51.       <item class="item">item6</item>
  52.       <item class="item">item7</item>
  53.       <item class="item">item8</item>
  54.     </div>
  55.   </body>
  56. </html>

列布局

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>弹性盒子</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       html {
  15.         font-size: 10px;
  16.       }
  17.       body {
  18.         font-size: 1.6rem;
  19.       }
  21.       .container {
  22.         display: flex;
  23.         height: 20rem;
  24.         /* width: 5em; */
  25.         boreder: 1px solid black;
  26.       }
  28.       .container > .item {
  29.         width: 10rem;
  30.         height: 5rem;
  31.         background-color: chartreuse;
  32.         border: 1px solid black;
  33.       }
  35.       /* 默认 */
  36.       .container {
  37.         flex-flow: column wrap;
  38.       }
  40.       /* .container {
  41.         flex-flow: row wrap;
  42.       } */
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="container">
  47.       <item class="item">item1</item>
  48.       <item class="item">item2</item>
  49.       <item class="item">item3</item>
  50.       <item class="item">item4</item>
  51.       <item class="item">item5</item>
  52.       <item class="item">item6</item>
  53.       <item class="item">item7</item>
  54.       <item class="item">item8</item>
  55.     </div>
  56.   </body>
  57. </html>

手机页面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>手机页面布局</title>
  8.   </head>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.       box-sizing: border-box;
  14.     }
  16.     html {
  17.       font-size: 10px;
  18.     }
  20.     body {
  21.       font-size: 1.6rem;
  22.     }
  24.     .container {
  25.       display: flex;
  26.       height: 100vh;
  27.       border: 1px solid #000;
  28.       flex-flow: column nowrap;
  29.     }
  31.     .container > .item {
  32.       height: 5rem;
  33.       width: 10rem;
  34.       border: 1px solid #000;
  35.       background-color: red;
  36.     }
  38.     .container > .item:nth-of-type(1),
  39.     .container > .item:nth-of-type(3) {
  40.       height: 5vh;
  41.     }
  42.     .container > .item:nth-of-type(2) {
  43.       height: 90vh;
  44.     }
  45.   </style>
  46.   <body>
  47.     <div class="container">
  48.       <div class="item">item1</div>
  49.       <div class="item">item2</div>
  50.       <div class="item">item3</div>
  51.     </div>
  52.   </body>
  53. </html>

项目对齐方式

1.整体居中对齐

2.整体末尾对齐

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex容器属性</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       :root {
  16.         font-size: 10px;
  17.       }
  19.       body {
  20.         font-size: 1.6rem;
  21.       }
  23.       .container {
  24.         display: flex;
  25.         height: 20rem;
  26.         border: 1px solid blue;
  28.         justify-content: end;
  29.         /* justify-content: center; */
  30.       }
  32.       .container .item {
  33.         width: 5rem;
  34.         background-color: red;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <div class="container">
  40.       <div class="item">item1</div>
  41.       <div class="item">item2</div>
  42.       <div class="item">item3</div>
  43.       <div class="item">item4</div>
  44.     </div>
  45.   </body>
  46. </html>

交叉轴对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex容器属性</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       :root {
  16.         font-size: 10px;
  17.       }
  19.       body {
  20.         font-size: 1.6rem;
  21.       }
  23.       .container {
  24.         display: flex;
  25.         height: 20rem;
  26.         border: 1px solid blue;
  27.         justify-content: space-evenly;
  28.         /* justify-content: end; */
  29.         /* justify-content: center; */
  30.         align-items: center;
  31.       }
  33.       .container .item {
  34.         /* width: 5rem; */
  35.         background-color: red;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="container">
  41.       <div class="item">item1</div>
  42.       <div class="item">item2</div>
  43.       <div class="item">item3</div>
  44.       <div class="item">item4</div>
  45.     </div>
  46.   </body>
  47. </html>
  48. 3.多行文本布局
  50. ![](https://img.php.cn/upload/image/138/224/814/1616730514845755.png)
  53. ```html
  54. <!DOCTYPE html>
  55. <html lang="zh-CN">
  56.   <head>
  57.     <meta charset="UTF-8" />
  58.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  59.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  60.     <title>flex容器属性</title>
  61.     <style>
  62.       * {
  63.         margin: 0;
  64.         padding: 0;
  65.         box-sizing: border-box;
  66.       }
  68.       :root {
  69.         font-size: 10px;
  70.       }
  72.       body {
  73.         font-size: 1.6rem;
  74.       }
  76.       .container {
  77.         display: flex;
  78.         flex-flow: row wrap;
  79.         height: 20rem;
  80.         border: 1px solid blue;
  81.         /* justify-content: space-evenly; */
  82.         /* justify-content: end; */
  83.         /* justify-content: center; */
  84.         /* align-items: center; */
  85.         align-content: flex-end;
  86.         align-content: flex-start;
  87.         align-content: center;
  88.       }
  90.       .container .item {
  91.         /* height: 3rem; */
  92.         width: 5rem;
  93.         background-color: red;
  94.       }
  95.     </style>
  96.   </head>
  97.   <body>
  98.     <div class="container">
  99.       <div class="item">item1</div>
  100.       <div class="item">item2</div>
  101.       <div class="item">item3</div>
  102.       <div class="item">item5</div>
  103.       <div class="item">item6</div>
  104.       <div class="item">item7</div>
  105.       <div class="item">item8</div>
  106.       <div class="item">item9</div>
  107.       <div class="item">item10</div>
  108.       <div class="item">item11</div>
  109.       <div class="item">item12</div>
  110.     </div>
  111.   </body>
  112. </html>
上一条：传统定位布三行三列和flex布局下一条：遇到位置不可用怎样解决？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议