Learn how to wrap flex items onto multiple lines.
- [Instructor] Next we're going to talk about flex-wrap.…The flex-wrap property determines what happens…when there isn't space for all the flex items.…Do thy squish and stay on one line…or wrap onto multiple lines?…We're going to need our flex items…to be a bit wider for this example,…so we're going to give them a width in the CSS.…On line 14, for the class item ,…I am going to give it a width of 200 pixels.…Now we have our five flex items, a bit wider,…with a horizontal main axis.…
For flex-wrap, the default is no wrap.…I'm gonna go back to the container element…in line 13, and do flex-wrap: nowrap.…Note that there is no hyphen in nowrap,…which is a little different, because many other properties…in Flexbox have hyphens in their values.…With this default, everything is going to stay on one line.…In a wider viewport like this, they all fit,…but as I make the viewport narrower,…they won't all fit, with their defined width of 200 pixels,…but as flex items, the browser will decrease their width,…if possible, to fit them all inside…
Author
Released
10/24/2018- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox
Skill Level Intermediate
Duration
Views
Related Courses
-
HTML Essential Training
with James Williamson5h 54m Beginner -
CSS Essential Training 1
with Christina Truong2h 36m Beginner -
CSS Essential Training 2
with Christina Truong2h 21m Beginner
-
Introduction
-
What you should know1m 7s
-
1. Basic Page Structure
-
Viewport2m 22s
-
Required CSS3m 39s
-
Display property2m 25s
-
Positioning4m 59s
-
Floats2m 37s
-
Units3m 33s
-
-
2. Responsive Layout
-
Responsive design1m 55s
-
Media queries6m 25s
-
Flexbox and Grid1m 9s
-
Accessibility5m 48s
-
Browser support1m 36s
-
-
3. Grid Layout
-
Intro to CSS Grid2m 10s
-
Defining rows and columns3m 55s
-
Grid gap1m 52s
-
Sizing rows and columns5m 52s
-
Placing grid items5m 51s
-
Grid alignment overview1m 13s
-
Aligning tracks3m 46s
-
Variable columns4m 45s
-
Grid template areas4m 12s
-
Naming grid lines2m 47s
-
Ordering grid items1m 16s
-
Solution: The rainbow box6m 42s
-
-
4. Flexbox
-
Defining a flexbox container1m 53s
-
Direction3m 36s
-
Wrapping2m 30s
-
Ordering flex items1m 28s
-
Flexbox alignment overview1m 39s
-
Aligning items on main axis3m 16s
-
Aligning items on cross axis3m 35s
-
Aligning lines on cross axis3m 15s
-
Challenge: Floats to flexbox1m 21s
-
Solution: Floats to flexbox8m 17s
-
-
5. Layout Design
-
Centering content1m 54s
-
3-column layout with flexbox3m 14s
-
12-column layout setup4m 7s
-
-
Conclusion
-
Next steps35s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Wrapping