使用 flex 等列答案

【问题标题】：Equal column using flex使用 flex 等列
【发布时间】：2021-02-02 04:30:21
【问题描述】：

我为移动设备创建了纯 css 手风琴，并为网络创建了网格视图。现在我面临网络视图的列宽问题。在当前实现中，所有列的列宽都不相同。我想使用 flex 创建一个相等的列。

注意：此 html 对移动设备是响应式的，对于移动设备会有手风琴，对于网络会有行。

/*
 CSS for the main interaction
*/
.accordion > input[name="collapse"] {
  display: none;

  /*position: absolute;
  left: -100vw;*/
}

/* .accordion label,
.accordion .content{
 max-width: 620px;
  margin: 0 auto;
 } */

.accordion .content {
  background: #fff;
  overflow: visible;
  height: 0;

  padding: 10px 0;
}

.accordion > input[name="collapse"]:checked ~ .content {
  height: 200px;
  transition: height 0.5s;
}

.accordion label {
  display: block;
}

.edit-delete .item {
  flex-direction: row;
}
.edit-delete a {
  padding: 0 10px;
}
/* For Desktop */
@media only screen and (min-width: 1023px) {
  .accordion > input[name="collapse"]:checked ~ .content {
    height: auto;
  }
  .accordion .handle {
    width: 300px;
  }
  .handle label,
  .content,
  .col,
  .item {
    display: flex;
    width: 100%;
  }
}

.accordion {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.accordion > input[name="collapse"]:checked ~ .content {
  border-top: 0;
  transition: 0.3s;
}

.accordion .handle {
  margin: 0;
  font-size: 16px;
}

.accordion label {
  cursor: pointer;
  font-weight: normal;
  padding: 10px 0;
  user-select: none;
  pointer-events: none;
}

/* .accordion label:hover,
.accordion label:focus {
  background: #252525;
} */

.accordion .handle label:before {
  content: "";
  border: solid #008080;
  border-width: 0 3px 3px 0;
  padding: 4px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  float: right;
  margin-top: 2px;
  transition: 0.4s;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 20px;
}
.handle label:before {
  display: none;
}
.accordion > input[name="collapse"]:checked ~ .handle label:before {
  content: "";
  border: solid #008080;
  border-width: 0 3px 3px 0;
  padding: 4px;
  -webkit-transform: rotate(220deg);
  float: right;
  margin-top: 2px;
  transition: 0.4s;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 20px;
}

.accordion p:last-child {
  margin-bottom: 0;
}
/* .container{
    max-width: 620px;
    margin: 0 auto;
} */

.handle label,
.content,
.col {
  display: flex;
}
.item {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

@media (max-width: 1023px) {
  .content {
    display: block;
  }
  .content .col {
    padding: 10px 0;
  }
  .accordion {
    flex-direction: column;
    position: relative;
  }
  .accordion .content {
    overflow: hidden;
    transition: 0.5s;
    padding: 0;
  }
  .accordion label {
    pointer-events: all;
  }
  .handle label:before {
    display: block;
  }
  .edit-delete {
    position: absolute;
    bottom: 0;
  }

  .accordion .handle {
    height: 100px;
  }
  .handle .item {
    padding: 0 10px;
    width: auto;
  }
  .accordion > input[name="collapse"]:checked ~ .handle {
    height: auto;
  }
  .item {
    width: auto;
  }
  .item span:first-child {
    width: 150px;
  }
  .edit-delete a {
    padding-left: 0;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Expand Collapse Text Example</title>
    <meta name="author" content="Codeconvey" />
    <!-- Font Awesome -->
    <!-- Accordion CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="accordion">
      <input type="radio" name="collapse" id="handle1" />
      <div class="handle">
        <label for="handle1">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </label>
      </div>
      <div class="content">
        <div class="col">
          <div class="item">
            <span>Gender</span>
            <span>Male</span>
          </div>
          <div class="item">
            <span>Dealership</span>
            <span>fsdfsd</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Branch</span>
            <span>sdfsd</span>
          </div>
          <div class="item">
            <span>User Type</span>
            <span>Sales Executive</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Status</span>
            <span>Active</span>
          </div>
        </div>
        <div class="col edit-delete">
          <div class="item">
            <a href="#">Edit</a>
            <a href="#">Delete</a>
          </div>
        </div>
      </div>
    </section>
    <section class="accordion">
      <input type="radio" name="collapse" id="handle2" />
      <div class="handle">
        <label for="handle2">
          <div class="item">
            <span>Name</span>
            <span>Zyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </label>
      </div>
      <div class="content">
        <div class="col">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </div>
        <div class="col edit-delete">
          <div class="item">
            <a href="#">Edit</a>
            <a href="#">Delete</a>
          </div>
        </div>
      </div>
    </section>
    <section class="accordion">
      <input type="radio" name="collapse" id="handle3" />
      <div class="handle">
        <label for="handle3">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </label>
      </div>
      <div class="content">
        <div class="col">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>12345625320</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Mobile Number</span>
            <span>1212121212</span>
          </div>
        </div>
        <div class="col edit-delete">
          <div class="item">
            <a href="#">Edit</a>
            <a href="#">Delete</a>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

请查看全屏视图

请参阅下面的屏幕截图以了解不一致的列宽

【问题讨论】：

您发布的代码具有相同的列宽，因为所有行都有相同的数据（“Raman Rajan”）。请更新您的 HTML 以实际重现问题。
@Dai 我已经更新了 html 谢谢 :)
我看到了更新的数据，但网格仍然为我完美呈现。
@dai 问题出现在 1023 像素以上的网页视图中，请全屏查看。对于手机来说没有问题。所有列的列宽应该相等。
是的，当我以 1920 像素宽的全屏查看它时，它看起来不错，在 1024 像素和 1000 像素以及 400 像素时看起来也不错。 请发布一个屏幕截图。

标签： html css gridview flexbox grid

【解决方案1】：

这可以通过 3 个步骤来实现：

在.handle, .handle > label, .content, .col 元素上设置display: contents。这将使所有.item 元素成为section.accordion 的子元素
对于设置width: 0 和flex-grow: 1 的所有.item 元素，这将使所有列具有相同的宽度。
调整 section.accordion 上的填充以匹配您的第一个设计。

当然，这些必须仅针对 Web 视图进行。

【讨论】：

感谢您的回答..它按预期工作非常感谢:)