以Flexbox样式转换的旧容器

时间:2019-03-17 14:11:30

标签: html css flexbox

使用具有固定宽度和边距的容器div的旧居中方法: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 个答案:

答案 0 :(得分:1)

只需更新section.container的样式,如下所示:

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

justify-content有一些非常有用的设置。就您而言,center可以解决问题。您有flex-direction: row;很好,但这是伸缩方向的默认值,因此您可以省略该规则。

在{{1}上有一个max-width,因此它的宽度不如flex .container会产生居中效果,只需删除section规则即可。