Question

在下面的小提琴中，前两个项目连续显示彼此相邻，但由于只有3个项目，第三个显示100％。

我希望保持与其他2个项目相同的宽度，留下没有项目的空白区域。

我还将这些项目的宽度设置为40％，它显示为50％，每个10px边距，这很好，但我的印象是你需要flex：1 auto;以这种方式设置宽度。但这样做意味着从数据库中提取时，所有框都会显示100％。

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){ ... }

Answer 2

我不知道你想做什么，
首先我不认为这种风格[flex：1 250px]是正确的，你应该使用[flex：1 Auto;最大宽度：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/

所有项目的flexbox大小不一样

2 个答案: