Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器常用的四个属性
Blogger Information
Blog 11
fans 0
comment 0
visits 9072
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
523 people have browsed it
  • flex-flow: 设置主轴的方向和项目在主轴的换行方式
  • justify-content: 项目在主轴的对齐方式
  • align-items: 项目在交叉轴上的对齐方式
  • align-content: 设置项目在多行容器中的对齐方式

代码实例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>实例演示:flex容器常用的四个属性</title>
  7.     <style>
  8.       * {
  9.         box-sizing: border-box;
  10.       }
  11.       .container {
  12.         height: 15em;
  13.         border: 1px solid coral;
  14.         padding: 1em;
  15.         margin: 1em;
  16.         display: flex;
  17.       }
  18.       .container > .item {
  19.         width: 8em;
  20.         background-color: lightyellow;
  21.         border: 1px solid chocolate;
  22.       }
  24.       .container {
  25.         flex-flow: row nowrap;
  26.         flex-flow: row wrap;
  27.       }
  29.       /* .container {
  30.         flex-flow: column nowrap;
  31.         flex-flow: column wrap;
  32.         flex-flow: column wrap-reverse;
  33.         height: 8em;
  34.       } */
  36.       .container {
  37.         justify-content: flex-start;
  38.         justify-content: flex-end;
  39.         justify-content: flex-end;
  40.         justify-content: center;
  41.         justify-content: space-between;
  42.         justify-content: space-around;
  43.         justify-content: space-evenly;
  44.       }
  46.       .container {
  47.         flex-flow: row nowrap;
  48.         align-items: stretch;
  49.         align-items: flex-start;
  50.         align-items: flex-end;
  51.         align-items: center;
  52.       }
  53.       /.container {
  54.         flex-flow: row wrap;
  55.         align-content: stretch;
  56.         align-content: flex-end;
  57.         align-content: flex-start;
  58.         align-content: center;
  59.         align-content: space-around;
  60.         align-content: space-between;
  61.         align-content: space-evenly;
  62.       }
  63.     </style>
  64.   </head>
  65.   <body>
  66.     <div class="container">
  67.       <div class="item">item1</div>
  68.       <div class="item">item2</div>
  69.       <div class="item">item3</div>
  70.       <div class="item">item4</div>
  71.       <div class="item">item5</div>
  72.       <div class="item">item6</div>
  73.       <div class="item">item7</div>
  74.       <div class="item">item8</div>
  75.     </div>
  76.   </body>
  77. </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