html - 所有元素的 flexbox 大小不一样

Question

在下面的 fiddle 中，前 2 个元素并排显示，但由于只有 3 个元素，第 3 个元素以 100% 显示。

我希望它与其他 2 个元素保持相同的宽度，在没有元素的地方留下一个空白区域。

我还将这些元素的宽度设置为 40%，并且每个元素显示为 50%，边距为 10px，这很好，但我的印象是您需要 flex: 1 auto;以这种方式设置宽度。然而，这样做意味着从数据库中拉取时所有框都将以 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-column:nth-child(odd)”不移除边距。那是因为您的元素有一个类名“rev-col”。

这意味着 CSS 应该是

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