💻
HTML/CSS
  • Overview
  • How the Web Works
    • DNS, TCP/IP, HTTP, HTML
    • Anatomy of a Web Page
    • How a Web Page Gets Loaded
  • HTML/CSS intro
    • HTML
      • Boilerplate HTML
      • HTML Hierarchy
      • Meta Section
      • Text-formatting Elements
      • Image
      • Video
      • Anchor
      • Tables
      • Semantic Elements
    • CSS
      • Properties
      • Selectors
      • Box-Model
      • Block vs Inline
      • The Cascade
    • Layout
      • Container Elements
      • Grid vs Flexbox
      • Flexbox
      • Grid
  • Miscellaneous Topics
    • Background Image
    • Border-radius
    • Box-shadow
    • Centering Elements
    • Colors
    • Custom Properties
    • Forms
    • Typography
    • Units
  • Appendix
    • Google Fonts
    • Lorem Ipsum
    • HTML Cheatsheet
    • CSS Cheatsheet
    • Browser Support for HTML/CSS
    • unsplash.com (free images)
    • pexels.com (free images)
    • Chrome Default Stylesheet
  • Further Learning Resources
    • FE Mentor Challenges
    • Free Scrimba Courses
    • Kevin Powell Youtube
Powered by GitBook
On this page
  • The Container
  • The Container Items
  • Container properties
  • Flex Item properties
  • Resources

Was this helpful?

  1. HTML/CSS intro
  2. Layout

Flexbox

PreviousGrid vs FlexboxNextGrid

Last updated 3 years ago

Was this helpful?

The flex layout consists of parent container referred as flex container and its immediate children which are called flex items.

The Container

To create a flex container, just set the display property to flex. All of its immediate children will now be considered flex items.

.flex-container {
    display: flex;
}

The Container Items

Container properties

  • flex-direction - specifies flow of the flex items

  • flex-wrap - specifies whether the flex items should wrap if necessary and how.

  • justify-content - aligns flex items along main axis of container distributing free space among the items.

  • align-items - align flex items in the cross-axis direction.

Flex Item properties

  • order - the order of the item within the children (default to position in HTML)

  • flex-grow - how much the flex item will grow in relation to other items when positive free space is distributed.

  • flex-shrink - how much the flex item will shrink in relation to other items when negative free space is distributed.

Resources

A Complete Guide to Flexbox | CSS-TricksCSS-Tricks
Your first Flexbox layout - Flexbox tutorial - Scrimba.comScrimba
Logo
Logo