The flex-wrap property is a crucial part of the Flexbox layout model in CSS. It controls how flex items are wrapped within a flex container. By default, flex items try to fit into a single line, but using flex-wrap, you can change this behavior and allow them to wrap onto multiple lines if needed.
Syntax
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }
The flex-wrap property has three possible values:
1. nowrap (default): This is the default value, meaning all flex items will be laid out in a single line, even if it causes the items to overflow the container.
2. wrap: This value allows flex items to wrap onto multiple lines, from top to bottom if space is not sufficient for all the items to fit in one line.
3. wrap-reverse: Similar to wrap, but the wrap occurs in the reverse direction, which means items will wrap from bottom to top.
flex-wrap.html
<!DOCTYPE html> <html> <head> <style> .title{ background-color: lightgray; color: black; font-size: 25px; margin: 10px; width: 350px; } .container-flex-nowrap { display: flex; border: 2px solid black; padding: 10px; margin: 10px; width: 300px; } .container-flex-wrap { display: flex; border: 2px solid black; padding: 10px; margin: 10px; width: 300px; flex-wrap: wrap; } .container-flex-wrap-reverse { display: flex; border: 2px solid black; padding: 10px; margin: 10px; width: 300px; flex-wrap: wrap-reverse; } .item { background-color: deepskyblue; padding: 10px; margin: 10px; color: white; text-align: center; } .scenario{ margin-bottom: 40px; padding-left: 10px; padding-right: 10px; } </style> </head> <body> <div class = "scenario"> <h1 class="title">flex-wrap: nowrap</h1> <div class="container-flex-nowrap"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> <div class="item">F</div> </div> </div> <div class = "scenario"> <h1 class="title">flex-wrap: wrap</h1> <div class="container-flex-wrap"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> <div class="item">F</div> </div> </div> <div class = "scenario"> <h1 class="title">flex-wrap: wrap-reverse</h1> <div class="container-flex-wrap-reverse"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> <div class="item">F</div> </div> </div> </body> </html>
No comments:
Post a Comment