How to use flex-wrap in CSS?

LAVANYA M

3y1.2kCSS

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

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mohamed Azarudeen Z3y ago
Accepted 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:
1. 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.
2. wrap: This value allows flex items to wrap onto multiple lines, as necessary. The wrapping is done in the direction of the main axis.
3. 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;
}
Tuhin Paul3y ago
The following CSS will wrap the flex items to the next line if they are too wide:
```
.flex-container {
  flex-wrap: wrap;
}
```

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.








The flex-wrap Property


  A
  B
  C
  D
  E
  F


Note: Internet Explorer 10 and earlier versions do not support the flex-wrap property.

Vishal Yelve3y ago

The flex-wrap property specifies whether the flexible items should wrap or not.

.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 Shukla3y ago
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:
1. Select the flex container that you want to apply flex-wrap to.
  .container { display: flex; }
2. Set the value of flex-wrap property to nowrap, wrap, or wrap-reverse.
3. nowrap: The default value. Flex items will be forced to fit into a single line and may overflow the container.
4. wrap: Flex items will wrap onto multiple lines when the container is not wide enough.
5. 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; }
6. 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.