How to use flex-wrap in CSS?

Question

Help me in how to use flex-wrap in CSS.

Mohamed Azarudeen Z · Answer

The flex-wrap property in CSS is used to control the wrapping behavior of flexible items within a flex container. It specifies whether flex items should be forced into a single line or can be wrapped onto multiple lines. The flex-wrap property accepts three values: nowrap : This is the default value, and it means that flex items will not wrap onto multiple lines. All items will be forced onto a single line. wrap : This value allows flex items to wrap onto multiple lines, as necessary. The wrapping is done in the direction of the main axis. wrap-reverse : This value allows flex items to wrap onto multiple lines, but in the reverse direction of the main axis. Here's an example of how to use flex-wrap in CSS: .flex-container { display: flex; flex-wrap: wrap; }

Vishal Yelve · Answer

The flex-wrap property specifies whether the flexible items should wrap or not. 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 .flex-container { padding: 0; margin: 0; list-style: none; border: 1px solid silver; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; } .nowrap { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .wrap li { background: gold; } .wrap-reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .wrap-reverse li { background: deepskyblue; } .flex-item { background: tomato; padding: 5px; width: 100px; height: 100px; margin: 10px; line-height: 100px; color: white; font-weight: bold; font-size: 2em; text-align: center; } The red list is set to nowrap The yellow list is set to wrap The blue list is set to wrap-reverse also, refer below link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Brahma Prakash Shukla · Answer

flex-wrap is a CSS property that is used to control whether flex items should be wrapped or not when there is not enough space in the flex container. Here's how you can use flex-wrap in CSS: Select the flex container that you want to apply flex-wrap to. .container { display: flex; } Set the value of flex-wrap property to nowrap , wrap , or wrap-reverse . nowrap : The default value. Flex items will be forced to fit into a single line and may overflow the container. wrap : Flex items will wrap onto multiple lines when the container is not wide enough. wrap-reverse : Flex items will wrap onto multiple lines in the opposite direction. /* Flex items will be forced to fit into a single line */ .container { flex-wrap: nowrap; } /* Flex items will wrap onto multiple lines */ .container { flex-wrap: wrap; } /* Flex items will wrap onto multiple lines in the opposite direction */ .container { flex-wrap: wrap-reverse; } You can also use the shorthand flex-flow property to set both flex-wrap and flex-direction in one line. /* Flex items will wrap onto multiple lines and start from top */ .container { flex-flow: column wrap; } That's it! flex-wrap is a powerful property that helps you create responsive and flexible layouts.

Tuhin Paul · Answer

The following CSS will wrap the flex items to the next line if they are too wide: .flex-container { flex-wrap: wrap; }

Deepak Rawat · Answer

The flex-wrap property specifies whether the flexible items should wrap or not. Note: The flex-wrap property has no effect if the elements are not flexible items. #main { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; } #main div { width: 50px; height: 50px; } The flex-wrap Property A B C D E F Note: Internet Explorer 10 and earlier versions do not support the flex-wrap property.

How to use flex-wrap in CSS?

Answers (5)