flexbox尺寸對於所有物品都不相同

Question

在前兩個物品下方的小提琴中，連續顯示的是彼此相鄰，但因爲只有3個物品第三個顯示100％。

我想這樣保持與其他2個項目相同的寬度，在沒有項目的情況下留下空白區域。

我也設置這些項目的寬度爲40％，它顯示爲50％，每個10px的邊距這是很好，但我是在你需要的印象flex：1自動;以這種方式設置寬度。但是這樣做意味着從數據庫中提取時，所有框都會顯示100％。

https://jsfiddle.net/ffr9rhrw/

HTML

<div class="container"> 
    <div class="main"> 
    <div class="rev-col"> 
<div class="reviews-main-wrap"> 
      <div class="reviews-main-img"><img class="u-full-width"  src="../../images/reviews/{{ $review->img }}" ></div> 
      <div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div> 
      <div class="reviews-main-price">Price £££</div> 
      <div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div> 
      <div class="reviews-readmore">Read More</div></a> 
</div> 
</div> 
     <div class="rev-col"> 
<div class="reviews-main-wrap"> 
      <div class="reviews-main-img"><img class="u-full-width" src="../../images/reviews/{{ $review->img }}" ></div> 
      <div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div> 
      <div class="reviews-main-price">Price £££</div> 
      <div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div> 
      <div class="reviews-readmore">Read More</div></a> 
</div> 
</div> 
     <div class="rev-col"> 
<div class="reviews-main-wrap"> 
      <div class="reviews-main-img"><img class="u-full-width" src="../../images/reviews/{{ $review->img }}" ></div> 
      <div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div> 
      <div class="reviews-main-price">Price £££</div> 
      <div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div> 
      <div class="reviews-readmore">Read More</div></a> 
</div> 
</div> 
    </div> 

<!-- sidebar content --> 
    <div class="sidebar"> 
    @yield('sidebar') 
    </div> 
</div> 

CSS

.container { display:flex; flex-flow: row wrap; max-width:1200px; margin:0 auto; padding: 0 10px;} 
.header { flex: 1 100%; height:50px; background-color:#ff00ff;} 
.main {display:flex; flex-flow: row wrap; flex:1; background-color:; } 
.sidebar { flex: 0 250px; margin-left:10px;background-color:#ec2350; } 
.center { -webkit-justify-content: center; justify-content: center; } 

.rev-wrap{ display:flex; flex-flow: row wrap; background-color:#ececec;} 
.rev-col:first-child{flex:1 40%; margin-left:0px; background-color:#ff00ff;} 
.rev-col{flex:1 40%; margin-left:10px; background-color:#ff00ff;} 
.rev-column:nth-child(odd){ flex:1 40%; margin-left:0px; background-color:#ff00ff;} 
.rev-header{flex:1 auto; height:auto; padding:10px;background-color:#ff0000;} 
.reviewscontainer  { width: 100%; height:auto; margin: 0 auto; background-color:#f9f9f9; color:#2c3e50; } 
.reviews-main-wrap{border:0px solid #ccc;height:auto; margin-bottom:2%; ov 

Answer 1

關於 '的.rev柱：第n個孩子（奇數）' 不刪除餘量。那是因爲你的元素有一個類名'rev-col'。

這意味着CSS應該

.rev-col:nth-child(odd){ ... } 

Answer 2

你想要做什麼我不明白，
我不認爲這種風格[柔：1 250像素]第一件事情是正確的，你應該使用[flex：1 Auto; max-width：250px]你正在使用的其他不正確的樣式是[flex：1 40％]，正確的方法是[flex：1]或[flex：1 1 Auto]或[flex：1 1 0]。 ..等等（你得到的照片！）。

現在，由於容器是[display：felx]，所以這個div容器應該被它包含的元素填充。


因此，一種方法是簡單地添加另一個div以填充空白區域，

另一種方法是將容器設置爲[display：inline-flex]，這將導致容器div對齊到左邊並根據其內容設置其大小。


另一種我認爲最能滿足您需求的方式就是爲左側列和它們的容器設置最大寬度，這將防止它們的增長超過預期。

.main {display:flex; max-width:600px; flex-flow: row wrap; flex:1; background-color:; } 

.rev-col:first-child{flex:1; max-width:300px; margin-left:0px; background- 
color:#ff00ff;} 

.rev-col{flex:1; max-width:300px; margin-left:10px; background-color:#ff00ff;} 

.rev-col:nth-child(odd){ flex:1; max-width:300px; margin-left:0px; background-color:#ff00ff;} 

https://jsfiddle.net/wtesnrp7/