使用 flex 的等列

Question

我已经为移动设备创建了纯 css 手风琴，为 Web 创建了网格视图。现在我面临网络视图列宽的问题。在当前实现中，所有列的列宽都不相同。我想使用 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>

请检查全屏视图

有关列宽不一致的信息，请参阅下面的屏幕截图

Answer 1

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

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

当然，这些只能针对网络视图完成。

使用 flex 的等列

Equal column using flex

html

css

grid

gridview

flexbox