时间戳

首页 > 解决方案 > 旧容器转换为 flexbox 样式

html - 旧容器转换为 flexbox 样式

问题描述

使用具有固定宽度和边距的容器 div 的旧居中方法：0 auto;

我怎样才能“转换”成更“现代”的方式？因为当我使用它时，它将容器内的所有元素居中，不仅是容器本身，而且不应用 flex-direction 属性。

前任：

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

标签： htmlcssflexbox

解决方案

section只需像这样更新样式.container：

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

justify-content有一些非常有用的设置。在你的情况下center就可以了。你有flex-direction: row;这很好，但这是 flex 方向的默认值，所以你可以省略该规则。

A max-widthon the .containerso it is not as wide as the flex sectionwill现在产生居中效果，只需删除margin: 0 auto规则。

推荐阅读