How i used the responsive with flexbox css html?-CodePudding

I'm trying to work my flex and i used flex wrap because i want 3 blocks when it's a laptop and 1 block when it's a phone. But for the moment, nothing moove, i have 3 block with my laptop and also with my phone.

I thought it was flexWrap to make the block pass to the other line but it doesn't works

i tried to don't used bootstrap for this one so i'm a little bit lost without !

<div >
      <div >
     
        <img  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 >
        <img  src="./image.jpeg" />
        <p>Titre du film</p>
        <div >
          <div >
            <p>4.8/5</p>
          </div>
          <div >
            <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 >
        <img  src="./image.jpeg" />
        <p>Titre du film</p>
        <div >
          <div >
            <p>4.8/5</p>
          </div>
          <div >
            <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 >
      <img  src="./image.jpeg" />
      <p>Titre du film</p>
      <div >
        <div >
          <p>4.8/5</p>
        </div>
        <div >
          <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;
}

CodePudding user response：

flex-wrap: wrap; does not guarantee that it will be one column on mobile phone, because it wraps the element if it reaches its minimum width. so on bigger phones you may have two columns.

Solution 1

(it depends on screen size, so maybe a bigger phone will have two columns per row) Check the snippet:

.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 >
      <div >
     
        <img  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 >
        <img  src="./image.jpeg" />
        <p>Titre du film</p>
        <div >
          <div >
            <p>4.8/5</p>
          </div>
          <div >
            <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 >
        <img  src="./image.jpeg" />
        <p>Titre du film</p>
        <div >
          <div >
            <p>4.8/5</p>
          </div>
          <div >
            <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 >
      <img  src="./image.jpeg" />
      <p>Titre du film</p>
      <div >
        <div >
          <p>4.8/5</p>
        </div>
        <div >
          <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>

Solution 2

This guarantees that it will be one column per row on devices smaller that 800px width.

you can change the number to suit your needs.

.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 >
      <div >
     
        <img  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 >
        <img  src="./image.jpeg" />
        <p>Titre du film</p>
        <div >
          <div >
            <p>4.8/5</p>
          </div>
          <div >
            <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 >
        <img  src="./image.jpeg" />
        <p>Titre du film</p>
        <div >
          <div >
            <p>4.8/5</p>
          </div>
          <div >
            <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 >
      <img  src="./image.jpeg" />
      <p>Titre du film</p>
      <div >
        <div >
          <p>4.8/5</p>
        </div>
        <div >
          <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>

CodePudding user response：

You need to add media query for mobile device view.

@media screen and (max-width: 767px) {
   .flexbox {flex-direction: column;}
}

Note:you can change max width according your design or breakpoint.