<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .container { width: 800px; height: 600px; margin: 100px auto; background: tomato; display: flex; flex-direction: row; flex-wrap: wrap; /*下面这一项是上面2项的总结*/ flex-flow: row wrap; justify-content: space-between; /* justify-content属性定义了项目在主轴上的对齐方式。 flex-start（默认值） 左对齐 flex-end 右对齐 center 居中 space-between 两端对齐，项目之间的间隔都相等。 space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
align-items: stretch; /*align-items属性定义项目在交叉轴上如何对齐。 flex-start 交叉轴的起点对齐。 flex-end 交叉轴的终点对齐。 center 交叉轴的中点对齐。 baseline 项目的第一行文字的基线对齐。 stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。*/
align-content: space-between; /* 定义了交叉轴上面的空白应该如何分配 flex-start 与交叉轴的起点对齐。 flex-end 与交叉轴的终点对齐。 center 与交叉轴的中点对齐。 space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值） 轴线占满整个交叉轴。*/
} .item { width: 200px; height: 200px; background: green; font-size: 60px; text-align: center; border: blueviolet 1px solid; /*flex-grow: 指定子元素增长的方式，默认为0 。不指定则不进行增长； flex-shrink:指定子元素缩小的方式，默认为1; */ align-self: auto; /*指定侧轴的对齐方向 auto表示继承父级的align-items flex-start:侧轴的起始边界 flex-end:纵轴紧靠该结尾边界; center：居中对齐 baseline:基线对齐 stretch：采取拉升对齐的方式; */ } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <!--<div class="item">4</div>--> </div> </body></html>
转载于:https://www.cnblogs.com/xiaogao6681/p/7596689.html
相关资源：移动端页面（弹性盒模型布局）