Published in

Flexbox Positioning Cheat Sheet

In our upcoming website redesign, we decided to use flexbox for positioning elements within the layout. Flexbox or the flexible box layout module gives a container the ability to determine the best possible layout for the items inside. It has large support across all modern browsers with the exception of Internet Explorer 10 & 11 which have partial support. The transition to using flexbox is easy but does require front-end developers to change their model of thinking with regards to how elements are positioned within a website layout. Let us look at all the flexbox properties and how they impact the layout.

Flex Container

The flex container is the parent element that affects the layout positioning of its direct children elements or flex items. It is on the parent element that we apply the property display: flex; to affect the positioning of its flex items. Let look at the flexbox properties and how they will affect the container’s flex items.

  • display: flex | inline-flex;

    • flex — make the container display as a block element

    • inline-flex — make the container display inline with other elements

  • flex-direction: row | row-reverse | column | column-reverse;

    • row — (default) align the flex items from left to right

    • row-reverse — align the flex items from right to left

    • column — align the flex items from top to bottom

    • column-reverse — align the flex items from bottom to top

    See the Pen Flexbox | Flex-direction by Ted Marshall (@marshath) on CodePen.

  • flex-wrap: nowrap | wrap | wrap-reverse;

    • nowrap — (default) position all flex items in a single row or column

    • wrap — allow flex items to wrap below the previous line forming multiple rows or columns to best fit the display

    • wrap-reverse — allow flex items to wrap above the previous line forming multiple rows or columns to best fit the display

    See the Pen Flexbox | Flex-wrap by Ted Marshall (@marshath) on CodePen.

  • flex-flow: (flex-direction flex-wrap);

    • Shorthand for combining the flex-direction and flex-wrap into a single css property

  • justify-content: flex-start | flex-end | center | space-between | space-around;

    • flex-start — (default) align the flex items to the left

    • flex-end — align the flex items to the right

    • center — align the flex items to the horizontal center of the container

    • space-between — distribute the flex items across the entire width of the container with the remaining space equally distributed between each item

    • space-around — distribute the flex items across the width of the container with the remaining space equally distributed to the left and right of each item

    See the Pen Flexbox | Justify-content by Ted Marshall (@marshath) on CodePen.

  • align-items: flex-start | flex-end | center | stretch | baseline;

    • flex-start — align all the flex items to the top

    • flex-end — align all the flex items to the bottom

    • center — align all the flex items to the vertical center of the container

    • stretch — (default) stretch the flex items to the full height of the container

    • baseline — align all the flex items to the baseline of the text

    See the Pen Flexbox | Align-items by Ted Marshall (@marshath) on CodePen.

  • align-content: flex-start | flex-end | center | stretch | space-between | space-around;

    • flex-start — align the flex items as a group to the top of the container

    • flex-end — align the flex items as a group to the bottom of the container

    • center — align the flex items as a group to the horizontal center of the container

    • stretch — (default) equally stretch the height of all the flex item rows as a group to fill the full height of the container

    • space-between — distribute the flex item rows across the entire height of the container with the remaining space equally distributed between each row

    • space-around — distribute the flex item rows across the height of the flex container with the remaining space equally distributed to the top and bottom of each row

    See the Pen Flexbox | Align-content by Ted Marshall (@marshath) on CodePen.

Flex Item

The flex item is the direct child element of the flex container. These styles are used when one flex item needs to be styled differently than the other items in the flex container.

  • order: <integer>;

    • By default, flex items are arranged chronologically based upon their source order.

    • The order in which the flex items appear in the browser can be controlled based upon the flex item’s order value. Lower value numbers appear first followed by the sequentially higher values. The order property does not change the underlying source order in the code but rather only changes how the browser displays the items.

    See the Pen Flexbox | Order by Ted Marshall (@marshath) on CodePen.

  • flex-grow: <number>;

    • The default value is 0

    • Negative values are invalid

    • Flex-grow is a unitless value that indicates the proportion of space the item will take up when remaining space is available within the flex container. An equal value across flex items will distribute the remaining space proportionately between the items while a higher the value will designate more proportions to that particular item.

    See the Pen Flexbox | Flex-grow by Ted Marshall (@marshath) on CodePen.

  • flex-shrink: <number>;

    • The default value is 1

    • Negative values are invalid

    • Flex-shrink is a unitless value that indicates the proportion of space the item will give up when remaining space is unavailable within the flex container. An equal value across flex items will remove space proportionately between the items while a higher value will remove more proportions from that particular item.

    See the Pen Flexbox | Flex-shrink by Ted Marshall (@marshath) on CodePen.

  • flex-basis: <length> | auto;

    • Flex-basis defines the default size of an item before the remaining space is distributed via flex-grow or flex-shrink

    • length — a unit in em, px, or % that specifies the length of the flex item

    • auto — (default) the length of flex item or if no value is specified, the length of its content

    See the Pen Flexbox | Flex-basis by Ted Marshall (@marshath) on CodePen.

  • flex: none | (flex-grow flex-shrink flex-basis);

    • Shorthand for combining the flex-grow, flex-shrink, and flex-basis into a single css property

    • The default value is 0 1 auto

    • auto — value of 1 1 auto

    • none — value of 0 0 auto

    • inherit — inherits the value of the flex container

  • align-self: auto | flex-start | flex-end | center | stretch | baseline;

    • Overrides the flex container’s align-items property

    • flex-start — align the flex item to the top

    • flex-end — align the flex item to the bottom

    • center — align the flex item to the horizontal center of the container

    • stretch — (default) stretch the flex item to the full height of the container

    • baseline — align the flex item to the baseline of the text

    See the Pen Flexbox | Align-self by Ted Marshall (@marshath) on CodePen.

Flexbox is great for positioning items inside of a container, making it a perfect solution for small component layouts. View all the examples of flexbox properties in this article and give it a try on your next project.

Follow our blog via RSS or Email.

Privacy Policy We do not sell or share your information.

Ted is a graphic designer and front-end developer who specializes in branding, marketing, and website development.