💻
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
  • Grid and Flex Display Properties
  • Flexbox Wrapping
  • Flexbox is ideally suited for one-dimension
  • Resources

Was this helpful?

  1. HTML/CSS intro
  2. Layout

Grid vs Flexbox

PreviousContainer ElementsNextFlexbox

Last updated 3 years ago

Was this helpful?

Grid and Flex Display Properties

Two new CSS display properties (grid and flex) greatly improved the ability to specify the layout/positioning of sub-sections of an HTML document. These new CSS properties allow the web developer to specify a precise layout for how the children within a parent element's rectangular box are positioned. The parent container can be the HTML element for the overall page, or any sub-section of the HTML element hierarchy.

Grid is ideally suited for lining things up in two dimensions, whereas flexbox is ideally suited for lining things up in one dimension.

But Grid can be used in one-dimension only.

Flex only needs to be used when you need to control the distribution of the elements. In the layout below, the elements within the Yellow and Red sections will evenly distribute themselves by default and so do not need to be in a flex container.

Whereas, in the following examples, the elements take up different proportions of the container and the order of the elements is reversed. These are properties of the flex container.

Flexbox Wrapping

Flexbox can wrap elements, but it still is only laying the elements out in a single direction.

Flexbox is ideally suited for one-dimension

This example demonstrates the different flex settings and how it effects the layout of a horizontal <nav> element.

Resources