我正在尝试使用flex，我使用flex包装，因为当它是笔记本电脑时，我想要3个块，当它是手机时，我需要1个块。但就目前而言，我没有任何情绪，我的笔记本电脑和手机都有3块。
我以为是flexWrap让方块传给另一条线，但不起作用
我试着不使用引导程序，所以我有点迷失了没有！
<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>
.flexbox {
margin-top: 10%;
display: flex;
flex-wrap: wrap;
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
width: fit-content;
flex: 1;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}
flex-wrap: wrap;不能保证它在手机上是一列，因为如果元素达到最小宽度，它就会包裹元素。所以在更大的手机上，你可能有两列。
解决方案1
(这取决于屏幕大小，所以一部更大的手机可能每行有两列(查看代码片段：
.flexbox {
margin-top: 10%;
display: flex;
flex-wrap: wrap;
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
min-width:200px;
white-space:wrap;
max-width:100%;
width:0;
flex: 1 1 0;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>解决方案2
这保证了在宽度小于800px的设备上，它将是每行一列
您可以根据需要更改号码
.flexbox {
margin-top: 10%;
display: flex;
/*flex-wrap: wrap;*/
}
.image {
max-width: 100%;
}
.containerReview {
border-left: 5px solid red;
background-color: ghostwhite;
width: fit-content;
flex: 1;
}
.containerReviewFinal {
border-left: 5px solid red;
background-color: ghostwhite;
}
@media screen and (max-width:800px){/*change 800 to your break point */
.flexbox{
flex-direction:column;
}
}<div class="flexbox">
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div>
<p>4.8/5</p>
<p><i>Par critique 1</i></p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<div class="containerReview ">
<img class="image" src="./image.jpeg" />
<p>Titre du film</p>
<div class="row">
<div class="col-md-6">
<p>4.8/5</p>
</div>
<div class="col-md-6">
<p><i>Par critique 1</i></p>
</div>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book
</p>
</div>
</div>
</div>您需要为移动设备视图添加媒体查询。
@media screen and (max-width: 767px) {
.flexbox {flex-direction: column;}
}
注意：您可以根据设计或断点更改最大宽度。