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

Question

無論如何，是否允許柔性物品在寬度上增長，但在必要時僅在高度上增長。 我喜歡flexbox，但是即使沒有內容填充它們然后在頁面下方顯示其他項目，連續的彈性項目都會增長到相同的高度會覺得很痛苦。 理想情況下，當先前的項目沒有足夠的內容來填充框而不留下大空間時，我希望彈性項目將自己安排到可用空間中。

這是我缺乏知識還是不可能？ 如果不可能，可以在更新等中添加設施。

（抱歉。我試圖上傳圖表來解釋，但我的聲譽還不夠！）

[編輯。 代碼已添加為請求。 一些樣式留下來展示我希望被其他彈性項目占用的空白區域 。]

<!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

您正在尋找的是' align-content '屬性，默認設置為' stretch '並垂直對齊元素（橫軸）。

反對' justify-content '，默認' flex-start '，水平對齊元素（主軸）。

' align-self '，默認' auto '，可用於控制單個項目。 在其他情況下，給出max-height和height屬性也可以使用相同的值。

使用哪個選項取決於您的個人要求。

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

@Sharon

我相信這是你的答案。 基本上，解決方案中的所有內容都具有相對寬度和高度。 因此你的內心也是如此。 給你的'flex-item'提供最小和最大高度將防止高度調整大小。 你需要做更多的東西，所以看看代碼。

  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*/ }

 <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>

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

問題描述

1 個解決方案

解決方案1
6 2015-09-14 14:01:30

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

問題描述

1 個解決方案

解決方案1 6 2015-09-14 14:01:30

解決方案1
6 2015-09-14 14:01:30