Question

下面的代码段从技术上实现了以下目标：在屏幕变窄时（用于移动设备）动态调整div表的大小和堆栈。

我的问题，我是否正确使用弹性盒？还是我在浪费代码并使某些区域变得复杂，这可能会导致不必要的错误？对于sub div的所有flex显示，我的CSS都很冗长。

此外，我只是开始进行样式编码，对继承哪些样式不太熟悉。使我的代码比可能需要的更长。

谢谢

#container,
#container-1-2,
#container-3-4 {
  display: flex;
}

.ctable {
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  border: 5px solid #000000;
  margin: 2% 2% 2% 2%;
  height: 350px;
}

.ctable-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-basis: 10%;
  flex-grow: 1;
  font-size: 138%;
  width: 100%;
}

.ctable-header2 {
  text-align: center;
  flex-basis: 5%;
  flex-grow: 1;
  font-size: 188%;
  width: 100%;
  padding-bottom: 10%;
}

.ctable-header2>div {
  text-align: center;
  overflow: hidden;
}

.fine-prt {
  font-size: 40%;
  font-style: italic;
  width: 100%;
}

.ctable-list {
  flex-basis: 5%;
  display: flex;
  flex-direction: column;
  flex-grow: 5;
  text-align: center;
  margin: 0px;
  padding: 0 0px 0px 0px;
  font-size: 75%;
  width: 100%;
  border-top: 2px solid #000000;
}

.ctable-list div {
  display: flex;
  flex-basis: 25%;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.ctable-list div:nth-child(odd) {
  background-color: #f2f2f2;
}

@media only screen and (max-width: 700px) {
  #container-3-4,
  #container-1-2 {
    display: block;
  }
}

<div id="container">
  <div id="container-1-2">
    <div class="ctable">
      <div class="ctable-header">Header 1</div>
      <div class="ctable-header2"><sup>$</sup>PRICE
        <div class="fine-prt">fine print</div>
      </div>
      <div class="ctable-list">
        <div>list feature a - example aaaaa</div>
        <div>list feature b - example bbbbbbbb bbbbbbbbbbb</div>
        <div>list feature C - example ccccccc</div>
        <div></div>
      </div>
    </div>
    <div class="ctable">
      <div class="ctable-header">Header 2</div>
      <div class="ctable-header2"><sup>$</sup>PRICE
        <div class="fine-prt">fine print</div>
      </div>
      <div class="ctable-list">
        <div>list feature a - example aaaaa</div>
        <div>list feature b - example bbbbbbbb</div>
        <div>list feature C - example ccccccc cccccccccc</div>
        <div>list feature D - example dddddddd</div>
      </div>
    </div>
  </div>
  <div id="container-3-4">
    <div class="ctable">
      <div class="ctable-header">Header 3</div>
      <div class="ctable-header2"><sup>$</sup>PRICE
        <div class="fine-prt">fine print</div>
      </div>
      <div class="ctable-list">
        <div>list feature a - example aaaaa</div>
        <div>list feature b - example bbbbbbbb</div>
        <div>list feature C - example ccccccc cccccccccc</div>
        <div>list feature D - example dddddddd</div>
      </div>
    </div>
    <div class="ctable">
      <div class="ctable-header">Header 4</div>
      <div class="ctable-header2"><sup>$</sup>PRICE
        <div class="fine-prt">fine print</div>
      </div>
      <div class="ctable-list">
        <div>list feature a - example aaaaa</div>
        <div>list feature b - example bbbbbbbb</div>
        <div>list feature c - example ccccccc</div>
        <div>list feature D - example dddddddd dddddddddddd</div>
      </div>
    </div>
  </div>
</div>

Answer 1

这可能需要更多的样式来适应您的某些行为，但这是我的基本想法，请告诉我是否可以为您指明一个正确的方向，如果可以的话，我们可以对其进行改进。

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  border: 5px solid #000;
  flex-basis: 23%;
}

.card:nth-child(2) {
  margin: 0 5px 0 10px;
}

.card:nth-child(3) {
  margin: 0 10px 0 5px;
}

.card header {
  text-align: center;
}

.card header small {
  display: block;
}

.card .body {
  text-align: center;
  margin: 0px;
  padding: 0 0px 0px 0px;
  font-size: 75%;
  width: 100%;
  border-top: 2px solid #000;
}

.card .body>div {
  padding: 15px 0;
}

.card .body>div:nth-child(odd) {
  background-color: #f2f2f2;
}

@media only screen and (max-width: 700px) {
  .card {
    border: 5px solid #000;
    flex-basis: 50%;
  }
  .card:nth-child(2) {
    margin: 0;
  }
  .card:nth-child(3) {
    margin: 0;
  }
}

<div class="container">
  <div class="card">
    <header>
      <h2>Header</h2>
      <sup>$</sup><span>PRICE</span>
      <small>fine print</small>
    </header>
    <div class="body">
      <div>list feature a - example aaaaa</div>
      <div>list feature b - example bbbbbbbb</div>
      <div>list feature C - example ccccccc cccccccccc</div>
      <div></div>
    </div>
  </div>
  <div class="card">
    <header>
      <h2>Ver Very Very Very Large Header</h2>
      <sup>$</sup><span>PRICE</span>
      <small>fine print</small>
    </header>
    <div class="body">
      <div>list feature a - example aaaaa</div>
      <div>list feature b - example bbbbbbbb</div>
      <div>list feature C - example ccccccc cccccccccc</div>
      <div>list feature D - example dddddddd</div>
    </div>
  </div>
  <div class="card">
    <header>
      <h2>Header</h2>
      <sup>$</sup><span>PRICE</span>
      <small>fine print</small>
    </header>
    <div class="body">
      <div>list feature a - example aaaaa</div>
      <div>list feature b - example bbbbbbbb</div>
      <div>list feature C - example ccccccc cccccccccc</div>
      <div>list feature D - example dddddddd</div>
    </div>
  </div>
  <div class="card">
    <header>
      <h2>Header</h2>
      <sup>$</sup><span>PRICE</span>
      <small>fine print</small>
    </header>
    <div class="body">
      <div>list feature a - example aaaaa</div>
      <div>list feature b - example bbbbbbbb</div>
      <div>list feature C - example ccccccc cccccccccc</div>
      <div>list feature D - example dddddddd</div>
    </div>
  </div>
</div>

我是否正确且最佳地使用flex-box？

1 个答案: