flex布局[一行三个元素,剩下的元素自动换行,左对齐]

2021年9月3日 109次阅读 来源: H_keoow

1: 需求: 每一行三个元素,剩下的元素自动换行,而且左对齐[如图]《flex布局[一行三个元素,剩下的元素自动换行,左对齐]》
2: 实现之后的样子《flex布局[一行三个元素,剩下的元素自动换行,左对齐]》
3: 实现的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> * {  margin: 0; padding: 0; } .father {  width: 50%; box-shadow: 0 0 10px rgb(31 55 153 / 10%); background: #FFF; padding: 20px; } ul {  display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 0 -13px; } ul div {  box-sizing: border-box; width: 33.33%; padding: 0 13px; margin-bottom: 24px; } ul div li {  list-style: none; padding: 10px; border-radius: 4px; border: 1px solid #EBEDF0; } .father .second {  height: 100px; background: yellowgreen; } </style>
</head>

<body>
  <div class="father">
    <ul>
      <div>
        <li>1111</li>
      </div>
      <div>
        <li>222</li>
      </div>
      <div>
        <li>333</li>
      </div>
      <div>
        <li>444</li>
      </div>
      <div>
        <li>555</li>
      </div>
    </ul>
    <div class="second">我是第二个子元素</div>
  </div>

</body>

</html>

4: 需要注意的点
1): 第一次写的时候,一半思路是给每一个子元素的宽度为31%,右边距(margin-right:2%)为2%,3的倍数的元素没有右边距,但是这样写的话元素占比有误差,总宽度达不到100%, 没法实现与并列的子元素左右对齐,遂换内边距的写法;

2): 实现思路:《flex布局[一行三个元素,剩下的元素自动换行,左对齐]》
3): 注意点:

  • box-sizing默认值为content-box,其width 不包括 padding 和 border,因此在子元素宽度为33.33%的基础上再次加上内边距会导致自动换行,所以要将 box-sizing的值改为 border-box
  • border-box: width 包括 padding 和 border,则增加padding或border大小不会影响块状元素的大小，只会压缩content大小
    原文作者：H_keoow
    原文地址: https://blog.csdn.net/H_keoow/article/details/114914708
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞