Explaining CSS flex wrapping
The CSS flex-wrap
property specifies the placement of flex items in the lines of the flex container:
Example
#first {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: nowrap; /* Safari 6.1+ */
display: flex;
flex-wrap: nowrap;
}
#second {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: wrap;
}
![DataCamp DataCamp](https://assets.bitdegree.org/online-learning-platforms/storage/media/datacamp-logo-5f96bfc70113e.o.png)
Pros Main Features
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
![Udacity Udacity](https://assets.bitdegree.org/online-learning-platforms/storage/media/udacity-review-logo-small.o.png)
Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
![Udemy Udemy](https://assets.bitdegree.org/online-learning-platforms/storage/media/udemy-logo-small.o.png)
Pros Main Features
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
Syntax for flex-wrap
To use the flex-wrap
property, you need to define one of the three available values:
flex wrap: value;
See all the values explained in the table below.
Value | Syntax | Meaning |
---|---|---|
nowrap |
flex-wrap: nowrap; |
The default value. All the items are placed in one value, even if they don't fit within the container borders |
wrap |
flex-wrap: wrap; |
The items are wrapped in several lines to fit within the container borders. The direction depends on the value of flex-direction |
wrap-reverse |
flex-wrap: wrap-reserve; |
The items are wrapped in several lines to fit within the container borders. The direction is opposite to the value of flex-direction |
Browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
29+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/edge-logo.jpg)
Edge
12+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
28+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/ie-logo.jpg)
IE
11+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
17+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
9+
Mobile browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
29+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
52+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
18+
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
9+