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

时间:2018-04-24 15:39:20

标签: html css

我需要.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>

2 个答案:

答案 0 :(得分:5)

我习惯爱你的原始标题(“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

答案 1 :(得分:0)

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