flexbox cheat-set
December 3, 2022 - Reading time: 4 minutes

I still can't remember wich property apply to which axis so let's build a cheat-set! Again, many thanks to FreeCodeCamp courses for the detailed explanations.

For starters, in our HTML document we'll need a container as well as children boxes. For instance:

<body>
 <main>
  <section>
    <h2>section 1</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
  <section>
    <h2>section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </section>
  <section>
    <h2>section 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </section>
 </main>
</body>

Here the container is main and it's children boxes are section. Let's tell the browser how to position elements on the page:

main {
    display: flex;
    justify-content: space-evenly;
}

Explanations & other possibilites

First thing first, we have to declare we're using the flex model. Use display property value flex for that.

Main axis

The main axis is declared with flex-direction property:

  • row (default): horizontal axis with flex items from left to right
  • row-reverse: horizontal axis with flex items from right to left
  • column: vertical axis with flex items from top to bottom
  • column-reverse: column-reverse: vertical axis with flex items from bottom to top

The justify-content property determines how the items inside a flex container are positioned along the main axis. It can take this values (find all on mdn web docs):

  • Positional alignment: center | start | end | flex-start | flex-end | left | right
  • Distributed alignment: space-between | space-around | space-evenly | stretch

The flex-wrap property determines how the flex items behave when the flex container is too small. Otherwise, items will shrink if needed. It can take this values:

  • nowrap (default)
  • wrap
  • wrap-reverse

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. It can take one or two lenght value(s) (such as 1em for instance) or percentage value(s).

Cross axis

The align-items property controls alignment of all items on the cross axis. It can take this values:

  • Positional alignment: center | start | end | flex-start | flex-end
  • Baseline alignment: baseline | first baseline | last baseline

Search

Categories