文章目录

• • 效果图
  • 参考文档
  • 代码

效果图

其实弹性布局的好处是：当网页大小变化（如窗口resize）时，处于弹性容器(flex container)中的弹性元素(flex item) 之间的距离也会变化。
需要特别注意的是：

弹性布局的主要CSS如下。

/* 弹性布局的主要CSS如下。注意 justify-content 的可选值：     start / center / end / left / right / flex-start / flex-end      space-between / space-around / space-evently */ #container {     display: flex;     /* flex-direction: row; */ 		/* flex-wrap: wrap; */     justify-content: space-between; } #container>div {     /* flex-grow: 2; */     width: 100px;     height: 100px; } 

参考文档

• display
• flex
• justify-content

代码

                                
         
aaa 1
         
aaa 2
         
aaa 3
         
aaa 4
         
aaa 5
     
      
         
         这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度，这取决于flex-direction值。         剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。