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>

更多相关文章

  1. flex容器中的四个属性的功能演示
  2. flex容器属性的功能，参数，以及作用
  3. css-flex布局
  4. 3.24实例演示flex容器中的四个属性的功能，参数，以及作用
  5. css之flex容器
  6. 【CSS入门】前端布局神器Flex弹性盒模型详解及适用场景(建议收藏
  7. 0324作业-flex布局
  8. flex布局：flex容器中的四个属性的功能，参数，以及作用
  9. 在苹果Mac上的“邮件”中如何使用列布局？

随机推荐

  1. UI控件之显示文本控件TextView（上）
  2. 研究了有一个月android下手机录制视频做
  3. Android—android与js交互以及相互传参
  4. 登录时旋转等待效果
  5. Android 博客目录整理
  6. 从NDK在非Root手机上的调试原理探讨Andro
  7. Android开发之一些问题的解决办法
  8. android实现进程注入
  9. 适用于 AIDE - Android Java IDE 的幸运
  10. Android向服务器传接和接收数据的方法汇