Flex 布局砌墻效果

引言：

使用 CSS 實(shí)現(xiàn)砌墻效果

使用 flex-wrap: wrap 換行后如何讓每行元素均勻撐滿整行

使用 flex-wrap: wrap 換行后如何給四個(gè)角的元素加上圓角

關(guān)鍵樣式

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

樣式解析：

flex-grow: 1;

意味著所有的 flex 元素都有相同的擴(kuò)展比例，因此它們將平均分配剩余的空間。

例如，如果你有三個(gè)元素，每個(gè)元素的 flex-grow 屬性都設(shè)置為 1，那么每個(gè)元素都會(huì)接收到剩余空間的三分之一。

砌墻效果代碼

<!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; /* 過渡動(dòng)畫 */
    }
    .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>

獲得四個(gè)角的元素，并添加圓角

這個(gè)方案目前我只有 js 的實(shí)現(xiàn)方式。使用 css 方式只能得到第一個(gè)元素和最后一個(gè)元素，沒能找到獲得右上角和左下角元素的方式

關(guān)鍵 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);
  // 獲取四個(gè)角, 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 是設(shè)置圓角的，由 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; /* 過渡動(dòng)畫 */
    }
    .flex-item:hover{
      background-color: #c1c1c1;
      /* 改變鼠標(biāo)樣式為手 */
      cursor: pointer;
    }

    /* 下面的 css 是設(shè)置圓角的，由 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);
  // 獲取四個(gè)角, 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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容