BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

Web Development

253What is Flexbox and Why Use It
254Enabling Flexbox with display: flex
255The Flex Container and Flex Items
256The Main Axis and Cross Axis
257flex-direction: Controlling the Main Axis
258Main Axis Alignment with justify-content
259Cross Axis Alignment with align-items
260flex-wrap: Allowing Items to Wrap
261The flex-flow Shorthand
262Multi-Line Alignment with align-content
263Understanding Flex Item Sizing Basics
264The Default Flex Item Behavior
265Flexbox and the Box Model
266When Flexbox Changes Block and Inline Behavior
267Flexbox Browser Support and Fallbacks
268display: flex and Creating a Flex Container
269flex-direction: Row and Column Layouts
270flex-direction: Reverse Variants
271flex-wrap: Controlling Line Breaking
272flex-wrap: wrap-reverse for Bottom-Up Layouts
273flex-flow: Shorthand for Direction and Wrap
274justify-content: Main Axis Alignment
275justify-content: space-evenly and Safe Centering
276align-items: Cross Axis Alignment
277align-items: baseline Alignment for Typography
278align-content: Multi-Line Cross Axis Distribution
279gap: Modern Spacing Between Flex Items
280flex-grow: Distributing Extra Space
281flex-shrink: Handling Space Constraints
282flex-basis: Setting Initial Item Size
283The flex Shorthand Property
284Common flex Shorthand Values
285align-self: Individual Item Alignment
286order: Changing Visual Sequence
287Understanding flex-basis vs width/height
288min-width and max-width with Flexbox
289margin: auto for Item Positioning
290Aspect Ratios and Flex Items
291Combining Item Properties Effectively
292Horizontal Navigation Bar
293Vertical Centering
294Holy Grail Layout
295Equal Height Columns
296Card Layouts
297Sticky Footer Pattern
298Split Screen Layout
299Media Object Pattern
300Auto-Margins for Spacing
301Space-Between Groups
302Form Layouts with Flexbox
303Responsive Sidebar
304Icon and Text Alignment
305Pricing Table Pattern
306Breadcrumb Navigation
307Multi-Row Header
308Input Groups
309Flexbox vs Grid Decision

Web Development

253What is Flexbox and Why Use It
254Enabling Flexbox with display: flex
255The Flex Container and Flex Items
256The Main Axis and Cross Axis
257flex-direction: Controlling the Main Axis
258Main Axis Alignment with justify-content
259Cross Axis Alignment with align-items
260flex-wrap: Allowing Items to Wrap
261The flex-flow Shorthand
262Multi-Line Alignment with align-content
263Understanding Flex Item Sizing Basics
264The Default Flex Item Behavior
265Flexbox and the Box Model
266When Flexbox Changes Block and Inline Behavior
267Flexbox Browser Support and Fallbacks
268display: flex and Creating a Flex Container
269flex-direction: Row and Column Layouts
270flex-direction: Reverse Variants
271flex-wrap: Controlling Line Breaking
272flex-wrap: wrap-reverse for Bottom-Up Layouts
273flex-flow: Shorthand for Direction and Wrap
274justify-content: Main Axis Alignment
275justify-content: space-evenly and Safe Centering
276align-items: Cross Axis Alignment
277align-items: baseline Alignment for Typography
278align-content: Multi-Line Cross Axis Distribution
279gap: Modern Spacing Between Flex Items
280flex-grow: Distributing Extra Space
281flex-shrink: Handling Space Constraints
282flex-basis: Setting Initial Item Size
283The flex Shorthand Property
284Common flex Shorthand Values
285align-self: Individual Item Alignment
286order: Changing Visual Sequence
287Understanding flex-basis vs width/height
288min-width and max-width with Flexbox
289margin: auto for Item Positioning
290Aspect Ratios and Flex Items
291Combining Item Properties Effectively
292Horizontal Navigation Bar
293Vertical Centering
294Holy Grail Layout
295Equal Height Columns
296Card Layouts
297Sticky Footer Pattern
298Split Screen Layout
299Media Object Pattern
300Auto-Margins for Spacing
301Space-Between Groups
302Form Layouts with Flexbox
303Responsive Sidebar
304Icon and Text Alignment
305Pricing Table Pattern
306Breadcrumb Navigation
307Multi-Row Header
308Input Groups
309Flexbox vs Grid Decision

← Web Development

Lesson 268 of 2,982·5. FlexboxPro lesson

display: flex and Creating a Flex Container

Learn how applying display: flex transforms an element into a flex container and its direct children into flex items.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course