старый контейнер, преобразованный в стиле flexbox - PullRequest
Новая
       1

старый контейнер, преобразованный в стиле flexbox

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

Старый метод центрирования, использующий контейнерный контейнер с фиксированной шириной и полем: 0 авто;

Как я могу "преобразовать" в более "современный" способ?Потому что, когда я его использую, он центрирует все элементы внутри контейнера, а не только сам контейнер, и не применяет свойство flex-direction.

EX: 

<head>
<style>
 .container {
max-width: 1000px;
margin: 0 auto;
}

section {
display: flex;
flex-direction: row;
}

</style>
</head>
<body>

<section>
<div class="container">

</div>
</section

</body>

1 Ответ

1 голос
/ 17 марта 2019

Просто обновите стили для section и .container примерно так: 

section {
  display: flex;
  justify-content: center;
}
.container {
  max-width: 1000px;
}

justify-content имеет несколько действительно полезных настроек.В вашем случае center делает свое дело.У вас было flex-direction: row;, что хорошо, но это значение по умолчанию для направления гибкого направления, поэтому вы можете опустить это правило.

A max-width на .container, поэтому оно не такое широкое, как flex section теперь будет производить эффект центрирования, просто удалите правило margin: 0 auto.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...