博客列表 >多行容器中的项目对齐方式

多行容器中的项目对齐方式

南宫
南宫原创
2020年06月28日 11:40:56656浏览
  1. <!-- align-content使用 -->
  2. <div class="container">
  3. <div class="item">1</div>
  4. <div class="item">2</div>
  5. <div class="item">3</div>
  6. <div class="item">4</div>
  7. <div class="item">5</div>
  8. <div class="item">6</div>
  9. <div class="item">7</div>
  10. <div class="item">8</div>
  11. </div>
  1. <style>
  2. .container{
  3. width: 300px;
  4. display: flex;
  5. /* 多行容器 放不下就会换行*/
  6. flex-wrap: wrap;
  7. height: 150px;
  8. /* align-content: 设置多行容器中的项目排列; */
  9. /* 1. 容器剩余空间在所有项目“二边”的如何分配 ,将全部项目视为一个整体*/
  10. align-content: stretch;
  11. align-content: flex-start;
  12. align-content: flex-end;
  13. align-content: center;
  14. /* 2. 容器剩余空间在所有项目“之间”的如何分配 ,将项目视为一个个独立的个体*/
  15. align-content: space-between;
  16. align-content: space-around;
  17. align-content: space-evenly;
  18. }
  19. .container > .item{
  20. width: 60px;
  21. }
  22. </style>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议