Question

无论如何，是否允许柔性物品在宽度上增长，但在必要时仅在高度上增长。我喜欢flexbox，但是即使没有内容填充它们然后在页面下方显示其他项目，连续的弹性项目都会增长到相同的高度。理想情况下，当先前的项目没有足够的内容来填充框而不留下大空间时，我希望灵活项目将自己安排到可用空间。

这是我缺乏知识还是不可能？如果不可能，可以在更新等中添加设施。

（对不起。我试图上传图表来解释，但我的声誉还不够！）

[EDIT。代码已添加为请求。一些样式用于演示空格我希望被其他弹性项目占用。]

<!doctype html>
<html>
 <head>
   <style>
   .content {
   font-size: 2em;
   width: 100%;
   margin: 0px;
   padding: 0px;
   background-color: coral;
   display:flex;
   flex-direction:row;
   flex-wrap: wrap;
   justify-content: center;
   align-content: stretch;
   align-items: flex-start;
}
.flex-item {
  box-sizing: border-box;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis:40vw;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid white;
  border-radius: 2px;
 margin: 2vmin;
 padding: 2vmin;
}
</style>
</head>
<body>
<div class="content">
<div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis nisi. Sed nec purus consectetur, sodales mi vel, efficitur arcu. Vivamus id congue quam. Fusce imperdiet bibendum egestas. Mauris porttitor risus id pharetra pharetra. Vivamus et lorem erat. Nullam ac nulla ex. Nulla sit amet semper ligula. Integer augue sem, pharetra in ex ut, finibus mollis neque. Integer vulputate dolor massa, a maximus sem vehicula malesuada. Morbi a nulla ornare, egestas nisl in, ultrices est. Integer ut maximus elit. Cras ac velit condimentum, dapibus dui quis, mattis ex.
</div>
<div class="flex-item"><img src="https://pixabay.com/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%">
</div>
<div class="flex-item">Vivamus semper at tortor a lacinia. Nulla a suscipit felis. Aliquam erat volutpat. Integer dignissim suscipit nibh a accumsan.Fusce gravida nisl nec elit placerat porta. Ut feugiat feugiat lorem nec commodo. Morbi porttitor vel sapien id tincidunt. Vivamus venenatis pellentesque tempus.
</div>
<div class="flex-item"><img src="https://pixabay.com"/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%">  </div> 
  </div>
 </body>
</html>

显然我的问题不够明确！我将尝试使用网站限制进行扩展，但不允许发布图表也无济于事。

包含文本，图像或两者的Flex项目框。包含图像的Flex项目框缩放到可用空间。对于高分辨率，仅文本框具有相同的宽度和高度（正方形），因此图像缩放正常（正方形）并且所有都是削片机。然而，在400 px宽的视口中，仅包含文本的框变长（例如200 x 1000px用于参数），图像框为200 x 200px（正方形）。然后在弹性项目文本的底部显示下一行，在图像下方留下一个很大的间隙（比如800px高）。在收缩图像之后，其他柔性盒可以适合空间，但它们不会移动到间隙中。这个问题很明确吗？

Answer 1

您正在寻找的是＆＃39; 对齐内容＆＃39;属性，默认设置为＆＃39; 拉伸＆＃39;并证明元素垂直（横轴）。

反对＆＃39; 证明内容＆＃39;，默认＆＃39; flex-start ＆＃39;这是水平对齐元素（主轴）。

＆＃39; align-self ＆＃39;，默认＆＃39; 自动＆＃39;，可用于控制单个项目。在其他情况下，给出max-height和height属性也可以使用相同的值。

使用哪个选项取决于您的个人要求。

非常好的背景信息资源：Codrops CSS Reference - Flexbox

@Sharon

我相信这是你的答案。基本上，解决方案中的所有内容都具有相对宽度和高度。因此你的内心也是如此。给你的＆＃39; flex-item＆＃39;最小和最大高度都将防止高度调整大小。你需要做更多的事情，所以看看代码。

＆＃13;

        body {
          overflow: hidden;
          /* just for testing, remove */
        }
        .flex-content {
          width: 100%;
          margin: 0;
          padding: 0;
          display: flex;
          flex-flow: row wrap;
        }
        .flex-item {
          flex: 1 1 40vw;
          min-height: 50px;
          max-height: 50px;
          background-color: rgba(255, 255, 255, 0.7);
          text-align: center;
          border: 2px solid white;
          border-radius: 2px;
          margin: 2vmin;
          padding: 2vmin;
          background-color: #fce4ec; /* for testing*/
          
        }

＆＃13;

<div class="flex-content">
  <div class="flex-item">some text</div>
  <div class="flex-item">some text data</div>
  <div class="flex-item">some more text data</div>
  <div class="flex-item">again some more text data</div>
  <div class="flex-item">some text</div>
  <div class="flex-item">some text data</div>
  <div class="flex-item">some more text data</div>
  <div class="flex-item">again some more text data</div>
  <div class="flex-item">some text</div>
  <div class="flex-item">some text data</div>
  <div class="flex-item">some more text data</div>
  <div class="flex-item">again some more text data</div>
</div>

＆＃13;

我想柔性盒的宽度（水平）增长但不是高度（垂直）

1 个答案: