Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局理解
Blogger Information
Blog 19
fans 1
comment 0
visits 12231
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex布局理解
▽空城旧梦
Original
567 people have browsed it

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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post