Menu
I have my first, second, and third items and then I want the forth item to go to the next line no matter how wide is the space.
.box { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start; } .it { max-width: 420px; }<div class="box"> <div class="it">1</div> <div class="it">2</div> <div class="it">3</div> <div class="it">4</div> </div>
383
Using an element to break to a new flex row comes with an interesting effect: we can skip specifying the width of any item in our flex layout and rely completely on the line breaks to define the flow of our grid. This produces a layout with two vertically stacked full-width items (I've added a border to the .
To have content break to next line with flex when content reaches edge with Flex React Native, we can set flexWrap to 'wrap' . to set flexDirection to 'row' to set the flexbox direction to horizontal. Then we set flexWrap to 'wrap' to make the child items wrap when it reaches the right edge of the screen.
The solution is to force them by adding a collapsed row (height 0) which takes up the entire width of the container, making it occupy an entire row, thus pushing the 3rd item on the next row. Think of it like a <br> tag.
You can insert a wide pseudo-element at the right position:
.flex-container { display: flex; flex-wrap: wrap; } .flex-container::after { content: ''; width: 100%; } .flex-item:last-child { /* or `:nth-child(n + 4)` */ order: 1; }<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> </div>I have solved this by:
.flex-container{ display:flex; flex-direction:column; /* how you want your lines */ text-align:center; } <div class="flex-container"> <p>Line1</p> <p>Line2</p> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
