Flex 布局砌墙效果

作者: 夹板儿孩 | 来源:发表于2024-04-01 11:49 被阅读0次

实现元素水平垂直居中
div上下左右居中
移动端布局
浅谈微信小程序中flex布局的使用
利用flex实现垂直水平居中
flex布局
flex 布局换行
flex布局
使用flex布局实现图床网站企业站
初见FLEX

引言：

使用 CSS 实现砌墙效果

使用 flex-wrap: wrap 换行后如何让每行元素均匀撑满整行

使用 flex-wrap: wrap 换行后如何给四个角的元素加上圆角

关键样式

.flex-item {
    flex-grow: 1; /* 1:1:1 */
}

样式解析：

flex-grow: 1;

意味着所有的 flex 元素都有相同的扩展比例，因此它们将平均分配剩余的空间。

例如，如果你有三个元素，每个元素的 flex-grow 属性都设置为 1，那么每个元素都会接收到剩余空间的三分之一。

砌墙效果代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex布局</title>
  <style>
    .flex-container {
      width: 300px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .flex-item {
      background-color: #f0f0f0;
      text-align: center;
      line-height: 50px;
      padding:  2px;
      margin: 2px;
      flex-grow: 1; /* 1:1:1 */
      transition: background-color 0.5s; /* 过渡动画 */
    }
    .flex-item:hover{
      background-color: #c1c1c1;
      cursor: pointer;
    }

  </style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum dolor</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum dolor</div>
  <div class="flex-item">Lorem</div>
</div>
</body>
</html>

获得四个角的元素，并添加圆角

这个方案目前我只有 js 的实现方式。使用 css 方式只能得到第一个元素和最后一个元素，没能找到获得右上角和左下角元素的方式

关键 JavaScript 代码

  /**
   * 获取通过flex-wrap换行的所有行
   * @param container
   * @returns {*[]}
   */
  function getLines(container) {
    const children = Array.from(container.children);
    let top = children[0].getBoundingClientRect().top;
    return children.reduce((acc, child) => {
      if (child.getBoundingClientRect().top === top) {
        acc[acc.length - 1].push(child);
      } else {
        acc.push([child]);
        top = child.getBoundingClientRect().top;
      }
      return acc;
    }, [[]]);
  }

  const container = document.querySelector('.flex-container');
  const lines = getLines(container);
  console.log(lines);
  // 获取四个角, top-left, top-right, bottom-left, bottom-right
  const nooks = [
    lines[0][0],
    lines[0][lines[0].length - 1],
    lines[lines.length - 1][0],
    lines[lines.length - 1][lines[lines.length - 1].length - 1]
  ];

  nooks[0].classList.add('border-radius-top-left');
  nooks[1].classList.add('border-radius-top-right');
  nooks[2].classList.add('border-radius-bottom-left');
  nooks[3].classList.add('border-radius-bottom-right');

圆角 css 的代码：

    /* 下面的 css 是设置圆角的，由 js 添加样式 */
    :root {
      --border-radius: 8px;
    }
    .border-radius-top-left {
      border-top-left-radius: var(--border-radius);
      color: red;
    }
    .border-radius-top-right {
      border-top-right-radius: var(--border-radius);
      color: red;
    }
    .border-radius-bottom-left {
      border-bottom-left-radius: var(--border-radius);
      color: red;
    }
    .border-radius-bottom-right {
      border-bottom-right-radius: var(--border-radius);
      color: red;
    }

下面是完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex布局</title>
  <style>
    .flex-container {
      width: 300px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .flex-item {
      background-color: #f0f0f0;
      text-align: center;
      line-height: 50px;
      padding:  2px;
      margin: 2px;
      flex-grow: 1; /* 1:1:1 */
      transition: background-color 0.5s; /* 过渡动画 */
    }
    .flex-item:hover{
      background-color: #c1c1c1;
      /* 改变鼠标样式为手 */
      cursor: pointer;
    }

    /* 下面的 css 是设置圆角的，由 js 添加样式 */
    :root {
      --border-radius: 8px;
    }
    .border-radius-top-left {
      border-top-left-radius: var(--border-radius);
      color: red;
    }
    .border-radius-top-right {
      border-top-right-radius: var(--border-radius);
      color: red;
    }
    .border-radius-bottom-left {
      border-bottom-left-radius: var(--border-radius);
      color: red;
    }
    .border-radius-bottom-right {
      border-bottom-right-radius: var(--border-radius);
      color: red;
    }



  </style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum dolor</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum</div>
  <div class="flex-item">Lorem</div>
  <div class="flex-item">Lorem ipsum dolor</div>
  <div class="flex-item">Lorem</div>
</div>

<script>
  /**
   * 获取通过flex-wrap换行的所有行
   * @param container
   * @returns {*[]}
   */
  function getLines(container) {
    const children = Array.from(container.children);
    let top = children[0].getBoundingClientRect().top;
    return children.reduce((acc, child) => {
      if (child.getBoundingClientRect().top === top) {
        acc[acc.length - 1].push(child);
      } else {
        acc.push([child]);
        top = child.getBoundingClientRect().top;
      }
      return acc;
    }, [[]]);
  }

  const container = document.querySelector('.flex-container');
  const lines = getLines(container);
  console.log(lines);
  // 获取四个角, top-left, top-right, bottom-left, bottom-right
  const nooks = [
    lines[0][0],
    lines[0][lines[0].length - 1],
    lines[lines.length - 1][0],
    lines[lines.length - 1][lines[lines.length - 1].length - 1]
  ];

  nooks[0].classList.add('border-radius-top-left');
  nooks[1].classList.add('border-radius-top-right');
  nooks[2].classList.add('border-radius-bottom-left');
  nooks[3].classList.add('border-radius-bottom-right');
</script>
</body>
</html>