Table of Contents
Introduction
CSS Flex (or Flexbox) is used to create responsive websites as part of front-end webdesign. This post is just a quick reference to CSS Flexbox that offers an overview and very short explanations.
Overview
The element with display: flex; we call the flex container. Elements inside the container we call items.
Container
| Property | Possible values | Description |
| display | flex | inline-flex | Makes an element a flexbox. |
| flex-direction | column | column-reverse | row | row-reverse | The direction the flexbox flows, either horizontal (row) or vertical (column). The direction the flow goes is called the main-axis, the other the cross-axis. |
| align-items | flex-start | flex-end | center | baseline | stretch | Aligns items along the cross-axis. |
| justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly | Aligns items along the main-axis. |
| flex-wrap | nowrap | wrap | wrap-reverse | Handles behavior for items (elements) that no longer fit in their container. |
| flex-flow | (flex-direction) (flex-wrap) | Shorthand for flex-direction and then flex-wrap. E.g.: flex-flow: row wrap; |
| gap | px | cm | mm | in | pt | pc em | rem | % | vw | vh | vmin | vmax | ex | ch | Spacing between flex items. |
| row-gap | px | cm | mm | in | pt | pc em | rem | % | vw | vh | vmin | vmax | ex | ch | Spacing between flex items horizontally. |
| column-gap | px | cm | mm | in | pt | pc em | rem | % | vw | vh | vmin | vmax | ex | ch | Spacing between flex items vertically. |
Items
| Property | Possible values | Description |
| flex-grow | <number> | Defines how much the item grows relative to the other items, when the container has extra space. |
| flex-shrink | <number> | Defines how much the item shrinks relative to the other items, when the container is too small. |
| flex-basis | auto | px | <number> | The initial size of the item before space is distributed. |
| flex | (flex-grow) (flex-shrink) (flex-basis) | Shorthand for flex-grow, flex-shrink, flex-basis. E.g.: flex: 1 1 100px |
| order | <integer> | Items with a lower number appear before other items in the container. |
| align-self | auto | flex-start | flex-end | center | baseline | stretch | Overrides align-items set on the container. (margin can override justify-content) |
Glossary (Refresher)
- inherit: Take the value of the parent element.
- initial: Resets property to default.
- unset: Acts like inherit for inheritable properties and like initial for non-inheritable properties.
Absolute Length Units
These are fixed and not relative to anything else:
- px: Pixels – the most commonly used unit for on-screen designs.
- cm: Centimeters.
- mm: Millimeters.
- in: Inches (1 inch = 2.54 cm).
- pt: Points (1 point = 1/72 of an inch).
- pc: Picas (1 pica = 12 points).
Relative Length Units
These depend on the size of other elements or the viewport. Examples include:
- em: Relative to the font size of the element’s parent. For example, if the parent’s font size is 16px, 1em = 16px.
- rem: Relative to the font size of the root element (). If the root font size is 16px, 1rem = 16px.
- %: Percentage of the parent element’s size.
- vh: 1% of the viewport height.
- vw: 1% of the viewport width.
- vmin: The smaller of vh or vw.
- vmax: The larger of vh or vw.
- ex: Relative to the x-height of a font.
- ch: Relative to the width of the “0” (zero) glyph in the element’s font.
Flow Direction
Say we have a section called example, which is converted to have a flex layout.
<!-- example is the flex container, inside are the flex items -->
<section class="container">
</section>A flex layout flows either horizontally (row) or vertically (column). This flow direction is how the child elements (items) of the container element (that has display: flex) behave.
.container {
/* Give element the flex layout */
display: flex;
/* Set the direction of the flow */
flex-direction: column; /* can also be row, row-reverse etc. */
/* Set the size of the container */
width: 100%;
height: 200px;
}When the flex-direction is set to row, the main-axis is horizontal and the cross-axis vertical.
When the flex-direction is set to column, the main-axis is vertical and the cross-axis is horizontal.
Aligning Items in the Flex Container
The property align-items always aligns items in the cross-axis while justify-content always aligns items in the main-axis. (I omitted other CSS properties, such as width.)
/* Give element the flex layout */
.container {
display: flex;
flex-direction: column;
align-items: center; /* aligns items in the cross-axis */
justify-content: center; /* aligns items in the main-axis */
/* etc ... */
}align-items, possible cross-axis values:
| flex-start | Align at start of flex container |
| flex-end | Align at end of flex container |
| center | Center |
| baseline | Aligns to the baseline of the content |
| stretch | Stretch items to the size of the container |
justify-content, possible main-axis values:
| flex-start | |
| flex-end | |
| center | |
| space-between | Space between items in the container, not at the edges |
| space-around | Space around items in the container, less at the edges |
| space-evenly | Event space around items |
In the example, when flex-direction is changed to row (from column), the main-axis and cross-axis swap.
Flex Property
.container {
display: flex;
/* Shorthand for: flex-grow, flex-shrink, flex-basis */
flex: 1 1 auto; /* 1 grow-factor, 1 shrink factor, start-size */
}| flex-grow | The amount a flex item can grow in relation to other flex items, when more space is available |
| flex-shrink | The amount a flex item can shrink in relation to other flex items, when too little space is available |
| flex-basis | A minimum width of the item |
For more information you can go deeper into other sources.
Flex Wrap
If items inside a container overflow, the behavior can be set with flex-wrap:
.container {
display: flex;
/* Behavior when items inside a flex container overflow */
flex-wrap: wrap;
}| wrap | Wraps to keep fitting |
| no-wrap | Items go outside flexbox |
| wrap-reverse | Wraps in a reverse matter |
Flex Flow
The property flex-flow is nothing more than a shorthand of flex-direction and flex-wrap
.container {
display: flex;
/* Shorthand for: flex-direction, flex-wrap */
flex-flow: column wrap; /* Sets flex-direction to column, sets flex-wrap to wrap */
}Item order
To adjust the order of an item in a flex container
/* Item is inside a flex container */
.item {
order: -1; /* Item will be placed before all other items */
}Conclusion
We visited the core of the CSS properties to create a website with responsive design using Flexbox. This post does not explain in detail how everything works, but is meant as a quick reference. Besides the sources I used, I would recommend CSS Flexbox Layout Guide as a source to learn more about this topic as well.
References
Frain, B. (2022). Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques. Packt Publishing Ltd.
CSS: Cascading Style Sheets | MDN. (2025, 7 maart). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS
