将弹性项目保留在父容器内

Posted 2023-03-07

【中文标题】将弹性项目保留在父容器内

【英文标题】：Keep flex items inside parent container

【发布时间】：2020-02-17 06:04:06

【问题描述】：

我正在尝试创建一个元素，该元素将包含应响应的各种图像（宽度和高度）。到目前为止，使用 flexbox 已经成功，除了一件事。每次我减小窗口的宽度时，在某个点上，flex 项都会溢出父容器并溢出到容器宽度之外。

nav 
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    line-height: 80px;
    background: black;
    color: #fff;
    width: 100%;
    text-align: center;

body, p 
    margin: 0;
    padding: 0;
    width: 100vw;

.wrapper 
    height: 100vh;
    margin: 100px auto;
    min-width: 0;

.flex 
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
    min-width: 200px;
    flex-wrap: nowrap;

img 
    max-height: 100%;
    max-width: 100%;

.txt-rt 
    text-align: right;

.footer 
    background: darkgray;
    height: 300px;
    text-align: center;

<nav>This is a Navbar</nav>
<div class="wrapper">
    <div class="flex">
        <p>hello</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" >
        <p class="txt-rt">world</p>
    </div>
</div>
<div class="footer">
    <h3 class="footer">Footer content</h3>
</div>

在this CodePen example中，每次窗口宽度

所有其他功能看起来都按预期工作，但是一旦我将窗口宽度减小到某个点，图像就不会缩小。这可以防止所有 3 个 flex 项目在屏幕宽度内可见。是否有我应该添加的代码 - 不是媒体查询，因为将使用各种大小的图像 - 以确保无论窗口大小如何图像都能响应？注意：我不希望这些项目折叠到第二行。

【问题讨论】：

您的图像具有max- 尺寸，这仅表明它不能超出此范围。没有关于它的 minimal 维度的信息。由于它没有在 CSS 中定义，因此它成为图像的原生维度。如果您将其容器缩小到图像自身的尺寸之外，图像会破裂是非常合乎逻辑的。

你试过了吗flex-wrap: wrap

@KarelG - 如果我向图像添加最小宽度，它会扭曲它而不是保持纵横比。如果我以 500x800 的窗口尺寸查看图像，图像会在保持纵横比的同时缩小。当窗口高于 800 并且不将内容推送到父组件之外时，我希望图像保持纵横比。此外，所有三个项目都应该始终是内联的。我不希望他们换行或换行。

【参考方案1】：

.flex 
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
    min-width: 200px;
    flex-wrap: wrap; // this will move your content to new line if there is less space

【参考方案2】：

您可以使用此代码

* 
  box-sizing: border-box;


body 
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  text-align: center;


#main 
  display: flex;
  flex: 1;
  flex-direction: column;


#main>article 
  flex: 1;
  text-align: center;


#main>nav,
#main>aside 
  background: beige;


#main>nav 
  order: -1;


header,
footer 
  background: yellowgreen;
  height: 20vh;


header,
footer,
article,
nav,
aside 
  padding: 1em;


@media screen and (min-width: 576px) 
  #main 
    flex-direction: row;
  
  #main>nav,
  #main>aside 
    flex: 0 0 20vw;
  

<header>This is a Navbar</header>
<div id="main">
  <article><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" ></article>
  <nav>hello</nav>
  <aside>world</aside>
</div>
<footer>Footer content</footer>