中心对齐元件与CSS flex

Question

我已经使用flex设置了我的代码，这样它就可以响应地工作了(它看我希望在宽的设备子960上是怎样的，所以对桌面的任何更改都发生在css文件底部的CSS查询中)。这可能是一个非常简单的问题，但在大于960的视图上，8个瓷砖的宽度并不一致(其中一个.row包含4个.tiles) --我尝试添加25%的宽度，我认为这会使它们始终均匀地覆盖页面的宽度，但这是行不通的。在此范围内，.content (扩展内容)似乎进一步扩展到右边的行，我无法理解？

任何想法都会很感激的！

工作小提琴：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');
          });
        });
      }

Answer 1

当您在tiles上尝试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%;
}

您可以在box-sizing上了解更多关于MDN文档页面及其值的信息。

Answer 2

尝试在".tile“类中添加以下内容:flex: 20%；