Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > flex布局模式：display:flex；
Blogger Information
Blog 21
fans 0
comment 0
visits 9407
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布局模式：display:flex；
P粉116103988
Original
461 people have browsed it

flex的6大属性

效果图如下：


代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     .text{
  16.         height: 20em;
  17.         display: flex;
  18.         /* flex-flow: 项目的主轴 于  换行 */
  20.         /* 主轴不换行 */
  21.         flex-flow: row nowrap; 
  22.         /* place-content: 项目在主轴上面的对齐方式; */
  24.         /* 从头对齐 */
  25.         place-content:start;
  26.         /* 从末尾对齐 */
  27.         place-content: end;
  28.         /* 居中对齐 */
  30.         place-content: center;
  31.         /* 将剩余空间进行分配 */
  32.         /* 向两端对齐 */
  33.         place-content: space-between;
  34.         /* 分散对齐 */
  35.         place-content: space-around;
  36.         /* 平均分配对齐 */
  37.         place-content: space-evenly;
  38.         /* place-items: 项目在Y轴的对齐方式; */
  39.         /* 自动伸展 */
  40.         place-items:stretch;
  41.         /* 从上对齐 */
  42.         place-items: start;
  43.         /* 居中对齐 */
  44.         place-items: center;
  45.         /* 从下对齐 */
  46.         place-items: end;
  47.     }
  48.     .text >.item{
  49.         width: 10em;
  50.         padding: 1em;
  51.         border: 1px solid #000;
  52.         background-color: lightpink;
  53.         /* flex: 放大因子 收缩因子 计算宽度 */
  54.         /* 默认 */
  55.         flex: 0 1 auto;
  56.         flex:initial;
  57.         /* 可放大可缩小 */
  58.         flex: 1 1 auto;
  59.         flex: 1 auto;       
  60.         flex:auto;
  61.         /* 禁止放大或缩小 */
  62.         flex:none;
  63.         flex:0 0 auto;
  64.     }
  65.     .text >.item:first-of-type{
  66.         background-color: blue;
  67.         order: 1;
  68.     }
  69.     .text >.item:last-of-type{
  70.         background-color: yellow;
  71.         order: -1;
  72.         /* 控制某一个项目的对齐 */
  73.         place-self: start;
  74.     }
  75. </style>
  76. <body>
  77.     <div class="text">
  78.         <div class="item">item1</div>
  79.         <div class="item">item2</div>
  80.         <div class="item">item3</div>
  81.     </div>
  82. </body>
  83. </html>
Correcting teacher：PHPzPHPz

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