There is a container that contains elements (Maybe any number). The main thing is that the elements are transferred.

In example 1, this is implemented. But I would like to apply the flex properties for the blocks inside the container. THOSE. the blocks inside the container must have the same size and fill the entire width and height of the container; if the number of blocks is larger than can fit in the container, then the blocks need to be transferred.

Example 1 is implemented as:

/* Common Styles */ .content, .content1, .content2 { color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 50%; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* Flexbox Styles */ .content { display: flex; flex-wrap: wrap; } 
 <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> <div class="red">4</div> <div class="green">5</div> <div class="blue">6</div> </div>

As you can see from the example, the size of the blocks inside the container is set in pixels and percentages;

I am wondering whether it is possible to do with flex properties only (but in order to observe the transfer as in example 1)?

Example 2. How I tried to solve this problem.

 .content div, .content1 div, .content2 div { flex: 1; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* Flexbox Styles */ .content { display: flex; flex-wrap: wrap; } 
 <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> <div class="red">4</div> <div class="green">5</div> <div class="blue">6</div> </div>

As can be seen from example 2, the blocks are not transferred. How can this problem be solved?

  • What is the criterion for flexbox to understand what needs to be transferred to a new line? If anything, try to install at least min-width . - Vadim Ovchinnikov
  • Is the question still relevant? - Vadim Ovchinnikov

2 answers 2

It is necessary for each screen resolution to separately set the width of the block that will be positioned. I made for the mob version and the tablet, for the desktop it was made for 4 blocks. For dekstpop width: calc((100% - 20px) / 4); if there are more blocks on the screen. 4. if there are more, then divide by more.

In the "formula" is deducted on the sides. That is, you can understand for yourself what kind of indent is necessary for you. The width of the block will float depending on the width of the screen.

 .container { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-around; } .block { width: calc(100% - 20px); margin: 10px auto; background: black; height: 200px; } @media screen and (min-width: 768px) { .block { width: calc(50% - 30px); } } @media screen and (min-width: 1024px) { .block { width: calc((100% - 30px)/4); } } 
 <div class="container"> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> </div>

    flex: 1; means to use all free space. If you want to transfer lines, it is necessary that the block had a width. After that flex-wrap: wrap; will work.