Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS中flex布局的属性及应用
Blogger Information
Blog 17
fans 0
comment 0
visits 14773
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
CSS中flex布局的属性及应用
未来星
Original
828 people have browsed it

flex弹性布局是css3中的一个有效的布局方式。引入弹性盒布局模型（flex box）的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。或者说当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。

1. 术语

  1. 容器: 具有display:flex属性元素
  2. 项目: flex 容器的”子元素”
  3. 主轴: 项目排列的轴线
  4. 交叉轴: 与主轴垂直的轴线

2. 容器属性

序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式

3. 项目属性

序号 属性 描述
1 flex 项目的缩放比例与基准宽度
3 align-self 单个项目在交叉轴上的对齐方式
4 order 项目在主轴上排列顺序 
  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.         box-sizing: border-box;
  11.       }
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       .container {
  21.         /* 转为flex布局 */
  22.         display: flex;
  23.         height: 40rem;
  24.         border: 1px solid #000;
  25.       }
  27.       /* 项目样式 */
  28.       .container > .item {
  29.         width: 10rem;
  30.         /* height: 15rem; */
  31.         background-color: lightgreen;
  32.         border: 1px solid #000;
  33.       }
  35.       .container {
  36.         flex-flow: row nowrap;
  38.         /* 项目在主轴上的对齐方式: justify-content */
  39.         /* 1. 将所有项目看成一个整体来处理 */
  40.         justify-content: flex-start;
  41.         justify-content: flex-end;
  42.         justify-content: center;
  44.         /* 2. 将所有项目看成一个个独立的个体来处理 */
  46.         justify-content: space-between; /* 二端对齐 */
  47.         justify-content: space-around; /* 分散对齐 */
  48.         justify-content: space-evenly; /* 平均对齐 */
  49.       }
  51.       /* 项目在交叉轴上的对齐方式: align-items */
  52.       .container {
  53.         align-items: stretch; //拉伸
  54.         align-items: flex-start;
  55.         align-items: flex-end;
  56.         align-items: center;
  57.       }
  59.       /* 
  60.       justify-content: 项目在主轴上的对齐方式
  61.       align-items: 项目在交叉轴上的对齐方式 
  62.       */
  64.       .container {
  65.         flex-flow: row wrap;
  66.         /* 多行容器中对齐时,主轴是没有剩余空间的 */
  67.         /* 换行后,如果需要设置对方方式,就要求交叉轴上必须要有剩余空间 */
  68.         align-content: stretch;
  70.         /* 将交叉轴上所有项目看成一个整体 */
  71.         align-content: flex-start;
  72.         align-content: flex-end;
  73.         align-content: center;
  75.         /* 看成个体 */
  76.         /* 二端对齐 */
  77.         align-content: space-between;
  78.         /* 分散对齐 */
  79.         align-content: space-around;
  80.         /* 平均对齐 */
  81.         align-content: space-evenly;
  82.       }
  83.     </style>
  84.   </head>
  85.   <body>
  86.     <div class="container">
  87.       <div class="item">item1</div>
  88.       <div class="item">item2</div>
  89.       <div class="item">item3</div>
  90.       <div class="item">item4</div>
  91.       <div class="item">item5</div>
  92.       <div class="item">item6</div>
  93.       <div class="item">item7</div>
  94.       <div class="item">item8</div>
  95.     </div>
  96.   </body>
  97. </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