Flexbox | Frontend Practical Guide

Widely availableA standard choice for row or column layouts. Safe and broadly supported across production projects.

Overview

Flexbox is a one-dimensional layout system that makes alignment, spacing, and distribution of items predictable. It is especially effective for toolbars, navigation rows, and card groups.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`align-content`	29	12	28	9	29	9
`flex context` Supported in Flex Layout	21	12	28	9	25	9
`flex context.baseline`	57	79	45	9	57	9
`flex context.first baseline` `first baseline`	59	79	52	11	59	11
`flex context.last baseline` `last baseline`			52	11		11
`flex context.safe unsafe` `safe` and `unsafe`	115	115	63	17.6	115	17.6
`flex context.space-evenly`	60	79	52	11	60	11
`flex context.start end` `start` and `end`	93	93	45	15.6	93	15.6
`flex context.stretch`	57	79	52	9	57	9
`normal`	29	12	28	9	29	9
Other
`css.properties.align-items` The CSS align-items property sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas.	29	12	20	9	29	9
CSS property
`flex context` Supported in Flex Layout	52	12	20	7	52	7
`flex context.baseline`	21	79	28	7	25	7
`flex context.first baseline` `first baseline`	59	79	52	11	59	11
`flex context.last baseline` `last baseline`	108	108	52	16.2	108	16.2
`flex context.safe unsafe` `safe` and `unsafe`	115	115	63	17.6	115	17.6
`flex context.start end` `start` and `end`	93	93	45	15.4	93	15.4
Other
`css.properties.align-self` The align-self CSS property overrides a grid or flex item's align-items value. In grid, it aligns the item inside the Grid Areas. In flexbox, it aligns the item on the cross axis.	29	12	20	9	29	9
CSS property
`auto`	21	79	28	7	25	7
`flex context` Supported in Flex Layout	36	12	20	7	36	7
`flex context.baseline`	21	79	28	7	25	7
`flex context.first baseline` `first baseline`	59	79	52	11	59	11
`flex context.last baseline` `last baseline`	108	108	52	16.2	108	16.2
`flex context.safe unsafe` `safe` and `unsafe`	115	115	63	17.6	115	17.6
`flex context.start end` `start` and `end`	93	93	45	15.4	93	15.4
`flex context.stretch`	57	79	52	9	57	9
`normal`	21	79	28	7	25	7
`stretch`	21	79	28	7	25	7
`flex`	29	12	20	9	29	9
`inline-flex`	29	12	20	9	29	9
Other
`css.properties.flex` The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.	29	12	22	9	29	9
`css.properties.flex-basis` The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.	29	12	22	9	29	9
CSS property
`auto`	22	12	22	9	25	9
`content`	94	94	61	15.4	94	15.4
`fit-content`	94	94	94	16	94	16
`max-content`	94	94	66	16	94	16
`min-content`	94	94	66	16	94	16
Other
`css.properties.flex-direction` The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).	29	12	22	9	29	9
CSS property
`column`	21	12	22	7	25	7
`column-reverse`	21	12	81	7	25	7
`row`	21	12	22	7	25	7
`row-reverse`	21	12	81	7	25	7
Other
`css.properties.flex-flow` The flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.	29	12	28	9	29	9
`css.properties.flex-grow` The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's positive free space, if any, should be assigned to the flex item's main size.	29	12	20	9	29	9
CSS property
`less than zero animate` Non-standard <0 animate	49	79	32		49
Other
`css.properties.flex-shrink` The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line's negative free space is distributed between the line's flex items that have a flex-shrink value greater than 0.	29	12	20	9	29	9
`css.properties.flex-wrap` The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.	29	12	28	9	29	9
CSS property
`nowrap`	21	12	28	7	25	7
`wrap`	21	12	28	7	25	7
`wrap-reverse`	21	12	28	7	25	7
`none`	21	12	22	7	25	7
Other
`css.properties.justify-content` The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers.	29	12	20	9	29	9
CSS property
`flex context` Supported in Flex Layout	52	12	20	7	52	7
`flex context.left right` `left` and `right`	93	93	52	9	93	9
`flex context.safe unsafe` `safe` and `unsafe`	115	115	63	17.6	115	17.6
`flex context.space-evenly`	60	79	52	11	60	11
`flex context.start end` `start` and `end`	93	93	45	15.4	93	15.4
`flex context.stretch`	57	79	52	9	57	9
`left`	21	79	20	7	25	7
`normal`	21	79	20	7	25	7
`right`	21	79	20	7	25	7
Other
`css.properties.justify-items` The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.	52	12	20	9	52	9
CSS property
`center`	52	79	20	9	52	9
`flex context` Supported in Flex Layout	52	12	20	9	52	9
`left`	52	79	20	9	52	9
`legacy`	52	79	20	9	52	9
`right`	52	79	20	9	52	9
Other
`css.properties.order` The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0.	29	12	20	9	29	9
`css.properties.place-content` The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e., the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.	59	79	45	9	59	9
CSS property
`flex context` Supported in Flex Layout	59	79	45	9	59	9
Other
`css.properties.place-items` The CSS place-items shorthand property aligns items along both the block and inline directions at once. It sets the values of the align-items and justify-items properties. If the second value is not set, the first value is also used for it.	59	79	45	11	59	11
CSS property
`flex context` Supported in Flex Layout	59	79	45	11	59	11
Other
`css.properties.place-self` The place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e., the align-self and justify-self properties). This property applies to block-level boxes, absolutely-positioned boxes, and grid items. If the second value is not present, the first value is also used for it.	59	79	45	11	59	11
CSS property
`flex context` Supported in Flex Layout	59	79	45	11	59	11
`absolutely positioned flex children` Absolutely-positioned flex children	52	12	52	11	52	11

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.item {
  flex: 1 1 auto;
}

Live demo

center aligned. basic

Element center placementminpattern. with Justify-content and align-items.

PreviewFullscreen

space-between navigation

horizontal to group splitplacement, actual in toolbar. shape.

PreviewFullscreen

equalcolumn with flex-grow

cardwidth, emptyspe-s eachelement to equalsplitexample.

PreviewFullscreen

Use cases

Navigation bars
Arrange logos, links, and actions in one row while keeping spacing and alignment easy to manage.
Flexible card rows
Let cards share available width, wrap when needed, and keep equal heights more easily than float-based layouts.

Cautions

Without flex-wrap, items can compress or overflow in narrow containers.
Using order to rearrange items visually can create a mismatch with DOM order and keyboard navigation.

Overview

Browser support

Syntax

Live demo

center aligned. basic

space-between navigation

equalcolumn with flex-grow

Use cases

Navigation bars

Flexible card rows

Cautions

Accessibility

Related links