gpt4 book ai didi

html - 以 flexbox 样式转换的旧容器

转载 作者:太空宇宙 更新时间:2023-11-04 06:24:22 25 4
gpt4 key购买 nike

使用固定宽度和边距的容器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>

最佳答案

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

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

justify-content 有一些非常有用的设置。在您的情况下, center 可以解决问题。您有 flex-direction: row; 这很好,但这是 flex direction 的默认值,因此您可以省略该规则。

.container 上的 max-width 所以它不像 flex section 那样宽,现在会产生居中效果,只是移除 margin: 0 auto 规则。

关于html - 以 flexbox 样式转换的旧容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55207974/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com