Автозаполнение контейнера в сочетании с содержимым раздела flexbox - PullRequest
Новая
       21

Автозаполнение контейнера в сочетании с содержимым раздела flexbox

0 голосов
/ 26 марта 2019

Итак, я провел несколько тестов с контейнером с фиксированной шириной, но я тоже хочу использовать flexbox.

Итак, я хочу создать веб-страницу со всеми элементами, находящимися внутри контейнера, а также объединить раздел с flexbox.

Это правильный способ создания макета? Или я должен удалить .container и использовать только flexbox?

Markup: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: normal 1rem/1.5 sans-serif;
}

#showcase {
  background: #888;
  color: #fff;
  padding: 1rem;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  background: red;
}

.showcase-content {
  display: flex;
  justify-content: center;
  height: 200px;
}
<section id="showcase">
  <div class="container showcase-content">

    <div class="box">
      <h4>Box 1</h4>
    </div>
    <div class="box">
      <h4>Box 2</h4>
    </div>
    <div class="box">
      <h4>Box 3</h4>
    </div>
    <div class="box">
      <h4>Box 4</h4>
    </div>
    <div class="box">
      <h4>Box 5</h4>
    </div>

  </div>
</section>
...