Question

我在主页上有一个完整的视口宽度，一个完整的视口高度“英雄图像”。我已将其设为Flex容器。在flex容器内部是一个子div（包含一个标题）。该伸缩项目应与伸缩容器的底部对齐。它具有最大宽度，应在父级中水平居中。

但是，最大宽度被忽略。 div使用其内容的宽度-标题。请参阅JS小提琴：https://jsfiddle.net/4h7q6d5x/

您可以看到英雄图像中的.main div正在占用其内容的宽度-与英雄图像下方的.main div不同。

我研究了各种问题，包括这个max-width not working on flex item

但是将width：100％添加到flex项目不起作用。在较小的视口中，宽度和填充效果不佳，并且标题从右侧边缘裁剪掉。

如何获得最大宽度才能与Flexbox配合使用？

.hero_image {
    min-height: 100vh;
    background-color:yellow;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    }

.main {
    max-width:500px;
    margin:0 auto;
    padding:0 50px;
    background-color:pink;
    }


<div class="hero_image">
    <div class="main">
        <h1>Heading <br>couple of words</h1>
    </div>
</div>  

<div class="main">
    <p>Lots of content</p>
</div>

Answer 1

flex-containers内部的默认“宽度”（实际上为flex-basis）为auto，这使其仅与内容一样宽。

但是将width：100％添加到flex项目不起作用。在较小的视口中，宽度和填充效果不佳，并且标题从右侧边缘裁剪掉。

然后，我建议进行一些更改。不要使用弹性列，而应使用.main来放置align-items:flex-end div。

然后使用flex: 1设置默认的“宽度”（实际上是弹性增长）。

.hero_image {
  min-height: 50vh;
  /* for example */
  background-color: yellow;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.main {
  flex: 1;
  max-width: 50%;
  /* for example */
  margin: 0 auto;
  padding: 0 50px;
  background-color: pink;
}

<div class="hero_image">
  <div class="main">
    <h1>Heading <br>couple of words</h1>
  </div>
</div>

<div class="main">
  <p>Lots of text</p>
</div>

最大宽度不适用于Flexbox项目（项目正在缩小到内容的宽度）

1 个答案: