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/