Я правильно использую flex-box и самый оптимальный способ?

Question

Фрагмент кода ниже технически достигает цели динамического изменения размера таблиц div и их суммирования, когда экран становится узким (для мобильных устройств).

Мой вопрос, правильно ли я использую flex box?Или я трачу код и усложняю определенные области, которые могут вызвать ненужные ошибки?Мой CSS кажется многословным со всеми гибкими дисплеями для sub div.

Кроме того, я только начинаю заниматься кодированием стилей и не слишком знаком с тем, какие стили наследуются.Создание моего кода длиннее, чем, вероятно, должно быть.

Спасибо,

#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>