使用 CSS flex 居中对齐元素

Centre aligning elements with CSS flex

我已经使用 flex 设置了我的代码,以便它可以响应地工作(它正在寻找我希望在宽度小于 960 的设备上的方式,因此对桌面的任何更改都发生在底部的 css 查询中我的 CSS 文件)。可能是一个非常简单的问题,但在大于 960 的视图中,8 个图块的宽度不一致(一个 .row 包含 4 个 .tiles)——我尝试添加 25% 的宽度,我认为这会使它们总是均匀地跨越页面的宽度,但这没有用。其中 .content(扩展内容)似乎进一步扩展了我无法理解的右侧行?

如有任何想法,我们将不胜感激!

工作fiddle:https://jsfiddle.net/simoncunningham/zsLxuo26/7/

如有任何建议,我们将不胜感激!

<div class="box">
      <div class="tile" onclick="openTab('b1');">
        <img class="icon-spacing" src="./Icons/Banking.svg" />
        <p>Banking</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b1" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Banking</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b2');">
        <img class="icon-spacing" src="./Icons/RegTech.svg" />
        <p>RegTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b2" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>RegTech</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b3');">
        <img class="icon-spacing" src="./Icons/InsurTech.svg" />
        <p>InsurTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b3" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>InsurTech</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b4');">
        <img class="icon-spacing" src="./Icons/Lending.svg" />
        <p>Lending</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b4" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Lending</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="tile" onclick="openTab('b5');">
        <img class="icon-spacing" src="./Icons/Accounting.svg" />
        <p>Accounting</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b5" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Accounting</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b6');">
        <img class="icon-spacing" src="./Icons/Payments.svg" />
        <p>Payments</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b6" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Payments</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b7');">
        <img class="icon-spacing" src="./Icons/Quote.svg" />
        <p>Quote</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b7" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Quote</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b8');">
        <img class="icon-spacing" src="./Icons/WealthTech.svg" />
        <p>WealthTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b8" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>WealthTech</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
    </div>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.tile {
  flex: 1 0 auto;
  order: 0;

  /* For visual only  */
  background-color: black;
  border: 1px solid grey;
  height: 150px;
  text-align: center;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.active-tile {
  flex: 1 0 auto;
  order: 0;

  /* For visual only  */
  text-align: center;
  border: 1px solid #000;
  background-color: green;
  height: 125px;
  cursor: pointer;
}

.content {
  order: 1;
  flex: 1 0 100%;

  /* For visual only  */
  padding: 20px;
  color: white;
  text-align: center;
  border: 1px solid #000;
  background-color: #228b22;
}

.description {
  text-align: left;
}

.icon-spacing {
  margin-top: 24px;
}

/* Clear floats after the tiles */
.box:after {
  content: '';
  display: table;
  clear: both;
}

.closebtn {
  float: right;
  color: white;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

.arrow-up {
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* 
  "Desktop" and above
 */
@media (max-width: 961px) {
  .box {
    flex-direction: column;
  }

  .content {
    order: 0;
  }
}

 function openTab(tabName) {
        var i, x;
        x = document.getElementsByClassName('content');
        for (i = 0; i < x.length; i++) {
          x[i].style.display = 'none';
        }
        document.getElementById(tabName).style.display = 'block';

        // Get all the tabs into a collection
        // (don't use .getElementsByClassName()!)
        let tabs = document.querySelectorAll('.tile');

        // Set up a click event handler on each of the tabs
        tabs.forEach(function (tab) {
          tab.addEventListener('click', function (event) {
            // Loop over all the tabs and remove the active class
            tabs.forEach(function (tab) {
              tab.classList.remove('active-tile');
              tab.children[2].classList.remove('arrow-up');
            });

            // Set the background of the clicked tab
            this.classList.add('active-tile');
            tab.children[2].classList.add('arrow-up');
          });
        });
      }

尝试将以下内容添加到“.tile”class:flex-basis: 20%;

您的问题(当您尝试 width: 25% 在图块上时)是计算 100% 时没有考虑边框和填充。

  • .tile 的边框是 1px,所以 25% * 4 + 8 * 1px 大于 100%.
  • .content 的边框为 1px,填充为 20px,因此 100% + 2 * 1px + 2 * 20px 大于 100%

要解决此问题,您可以通过在分配宽度时包括边框和填充来更改框的计算方式:

.tile, .content {
  box-sizing: border-box;
}

.tile {
  width: 25%;
}

您可以在 MDN documentation page 上了解有关 box-sizing 及其值的更多信息。