Question

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

类似示例：Spotify website上的What’s on 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改变它时，现在我必须发布两个解决方案。多么美好的生活。

好ol'边缘

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

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

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

<div>HTML or whatever</div>

Shiny flexbox

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

浏览器支持：＆gt; = 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 ：不，你不会扩展你的500px基础
1 ：如果您的父级宽度低于500px，您会收缩吗

这不是黑魔法f ** kery，flex is awesome。

Answer 2

也许将最大宽度设置为与其父级相比固定值的某个百分比？

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

2 个答案:

好ol'边缘

Shiny flexbox