使用flexbox保持容器居中并在调整大小时缩小

Question

我需要.aboutContent保持相同的尺寸，但是在缩小屏幕尺寸的同时要缩小左右的边距。

类似的示例：What’s on Spotify?Spotify 网站上的div框。

#about {
  width: 1920px;
  height: 500px;
  display: flex;
}

.aboutContent {
  width: 1250px;
  height: 100%;
  background-color: red;
  margin-left: 20%;
}

<div id="about">
  <div class="aboutContent"></div>
</div>

Answer 1

我曾经喜欢您的原始标题（“ Flexbox页边距或其他内容”），但是随着James的更改，现在我不得不发布两个解决方案。真是命

良好的利润率

这是一些CSS或以内容为中心的内容。在利润和东西的帮助下。

浏览器支持：> = IE7。我猜应该这样做。

div {
  background-color: orange;
  max-width: 500px;
  margin: 0 auto;
}

<div>HTML or whatever</div>

闪亮的Flexbox

现在标题明确为Flexbox，这是一个新片段。以同样的价格，您将获得免费的Nicolas Cage图片。

浏览器支持：> = IE11。也应该这样做，因为使用IE11以下浏览器的人不习惯正确地布局网站，我们也不想混淆它们。

body {
  display: flex;
  justify-content: center;
}

img { /* Or div, or article, or whatever */
  flex : 0 1 500px;
}

<img src="https://www.placecage.com/500/230"/>

顺便说一下flex: 0 1 500px：

• 500px：默认情况下，您的尺寸为500px
• 0：不，您的扩展范围不会超过500像素
• 1：是的，如果您的父母宽度小于500像素，您会变小

这不是黑魔法，flex很棒。