toggle theme to dark mode

Related Topics

  1. Learn CSS
  2. Reference
  3. Properties
    1. accent-color
    2. align-content
    3. align-items
    4. align-self
    5. all
    6. animation-delay
    7. animation-direction
    8. animation-duration
    9. animation-fill-mode
    10. animation-iteration-count
    11. animation-name
    12. animation-play-state
    13. animation-timeline
    14. animation-timing-function
    15. animation
    16. appearance
    17. aspect-ratio
    18. backdrop-filter
    19. backface-visibility
    20. background-attachment
    21. background-blend-mode
    22. background-clip
    23. background-color
    24. background-image
    25. background-origin
    26. background-position-x
    27. background-position-y
    28. background-position
    29. background-repeat
    30. background-size
    31. background
    32. block-size
    33. border-block-color
    34. border-block-end-color
    35. border-block-end-style
    36. border-block-end-width
    37. border-block-end
    38. border-block-start-color
    39. border-block-start-style
    40. border-block-start-width
    41. border-block-start
    42. border-block-style
    43. border-block-width
    44. border-block
    45. border-bottom-color
    46. border-bottom-left-radius
    47. border-bottom-right-radius
    48. border-bottom-style
    49. border-bottom-width
    50. border-bottom
    51. border-collapse
    52. border-color
    53. border-end-end-radius
    54. border-end-start-radius
    55. border-image-outset
    56. border-image-repeat
    57. border-image-slice
    58. border-image-source
    59. border-image-width
    60. border-image
    61. border-inline-color
    62. border-inline-end-color
    63. border-inline-end-style
    64. border-inline-end-width
    65. border-inline-end
    66. border-inline-start-color
    67. border-inline-start-style
    68. border-inline-start-width
    69. border-inline-start
    70. border-inline-style
    71. border-inline-width
    72. border-inline
    73. border-left-color
    74. border-left-style
    75. border-left-width
    76. border-left
    77. border-radius
    78. border-right-color
    79. border-right-style
    80. border-right-width
    81. border-right
    82. border-spacing
    83. border-start-end-radius
    84. border-start-start-radius
    85. border-style
    86. border-top-color
    87. border-top-left-radius
    88. border-top-right-radius
    89. border-top-style
    90. border-top-width
    91. border-top
    92. border-width
    93. border
    94. bottom
    95. box-decoration-break
    96. box-shadow
    97. box-sizing
    98. break-after
    99. break-before
    100. break-inside
    101. caption-side
    102. caret-color
    103. clear
    104. clip-path
    105. clip
    106. color-scheme
    107. color
    108. column-count
    109. column-fill
    110. column-gap (grid-column-gap)
    111. column-rule-color
    112. column-rule-style
    113. column-rule-width
    114. column-rule
    115. column-span
    116. column-width
    117. columns
    118. contain
    119. content-visibility
    120. content
    121. counter-increment
    122. counter-reset
    123. counter-set
    124. cursor
    125. direction
    126. display
    127. empty-cells
    128. filter
    129. flex-basis
    130. flex-direction
    131. flex-flow
    132. flex-grow
    133. flex-shrink
    134. flex-wrap
    135. flex
    136. float
    137. font-family
    138. font-feature-settings
    139. font-kerning
    140. font-language-override
    141. font-optical-sizing
    142. font-size-adjust
    143. font-size
    144. font-stretch
    145. font-style
    146. font-synthesis
    147. font-variant-alternates
    148. font-variant-caps
    149. font-variant-east-asian
    150. font-variant-ligatures
    151. font-variant-numeric
    152. font-variant-position
    153. font-variant
    154. font-variation-settings
    155. font-weight
    156. font
    157. forced-color-adjust
    158. gap (grid-gap)
    159. grid-area
    160. grid-auto-columns
    161. grid-auto-flow
    162. grid-auto-rows
    163. grid-column-end
    164. grid-column-start
    165. grid-column
    166. grid-row-end
    167. grid-row-start
    168. grid-row
    169. grid-template-areas
    170. grid-template-columns
    171. grid-template-rows
    172. grid-template
    173. grid
    174. hanging-punctuation
    175. height
    176. hyphenate-character
    177. hyphens
    178. image-rendering
    179. image-resolution
    180. ime-mode
    181. initial-letter-align
    182. initial-letter
    183. inline-size
    184. inset-block-end
    185. inset-block-start
    186. inset-block
    187. inset-inline-end
    188. inset-inline-start
    189. inset-inline
    190. inset
    191. isolation
    192. justify-content
    193. justify-items
    194. justify-self
    195. left
    196. letter-spacing
    197. line-break
    198. line-height-step
    199. line-height
    200. list-style-image
    201. list-style-position
    202. list-style-type
    203. list-style
    204. margin-block-end
    205. margin-block-start
    206. margin-block
    207. margin-bottom
    208. margin-inline-end
    209. margin-inline-start
    210. margin-inline
    211. margin-left
    212. margin-right
    213. margin-top
    214. margin-trim
    215. margin
    216. mask-border-mode
    217. mask-border-outset
    218. mask-border-repeat
    219. mask-border-slice
    220. mask-border-source
    221. mask-border-width
    222. mask-border
    223. mask-clip
    224. mask-composite
    225. mask-image
    226. mask-mode
    227. mask-origin
    228. mask-position
    229. mask-repeat
    230. mask-size
    231. mask-type
    232. mask
    233. max-block-size
    234. max-height
    235. max-inline-size
    236. max-width
    237. min-block-size
    238. min-height
    239. min-inline-size
    240. min-width
    241. mix-blend-mode
    242. object-fit
    243. object-position
    244. offset-distance
    245. offset-position
    246. offset-rotate
    247. offset
    248. opacity
    249. order
    250. orphans
    251. outline-color
    252. outline-offset
    253. outline-style
    254. outline-width
    255. outline
    256. overflow-anchor
    257. overflow-block
    258. overflow-clip-margin
    259. overflow-inline
    260. overflow-wrap
    261. overflow-x
    262. overflow-y
    263. overflow
    264. overscroll-behavior-block
    265. overscroll-behavior-inline
    266. overscroll-behavior-x
    267. overscroll-behavior-y
    268. overscroll-behavior
    269. padding-block-end
    270. padding-block-start
    271. padding-bottom
    272. padding-inline-end
    273. padding-inline-start
    274. padding-left
    275. padding-right
    276. padding-top
    277. padding
    278. page-break-after
    279. page-break-before
    280. page-break-inside
    281. perspective-origin
    282. perspective
    283. place-content
    284. place-items
    285. place-self
    286. pointer-events
    287. position
    288. print-color-adjust
    290. resize
    291. right
    292. rotate
    293. row-gap (grid-row-gap)
    294. ruby-align
    295. ruby-position
    296. scale
    297. scroll-behavior
    298. scroll-margin-bottom
    299. scroll-margin-inline-start
    300. scroll-margin-inline
    301. scroll-margin-left
    302. scroll-margin-right
    303. scroll-margin-top
    304. scroll-padding-block-end
    305. scroll-padding-block-start
    306. scroll-padding-bottom
    307. scroll-padding-inline-end
    308. scroll-padding-inline-start
    309. scroll-padding-inline
    310. scroll-padding-left
    311. scroll-padding
    312. scroll-snap-coordinate
    313. scroll-snap-destination
    314. scroll-snap-points-x
    315. scroll-snap-points-y
    316. scroll-snap-type
    317. scrollbar-color
    318. scrollbar-width
    319. shape-image-threshold
    320. shape-margin
    321. shape-outside
    322. tab-size
    323. table-layout
    324. text-align-last
    325. text-align
    326. text-combine-upright
    327. text-decoration-color
    328. text-decoration-line
    329. text-decoration-skip-ink
    330. text-decoration-skip
    331. text-decoration-style
    332. text-decoration
    333. text-emphasis-color
    334. text-emphasis-position
    335. text-emphasis-style
    336. text-emphasis
    337. text-indent
    338. text-justify
    339. text-orientation
    340. text-overflow
    341. text-rendering
    342. text-shadow
    343. text-size-adjust
    344. text-transform
    345. text-underline-position
    346. top
    347. touch-action
    348. transform-box
    349. transform-origin
    350. transform-style
    351. transform
    352. transition-delay
    353. transition-duration
    354. transition-property
    355. transition-timing-function
    356. transition
    357. translate
    358. unicode-bidi
    359. user-select
    360. vertical-align
    361. visibility
    362. white-space
    363. widows
    364. width
    365. will-change
    366. word-break
    367. word-spacing
    368. writing-mode
    369. z-index
  4. Guides
  5. Conditional rules
    1. Using feature queries
  6. CSSOM view
    1. Coordinate systems
  7. Transforms
    1. Using transforms
  8. Transitions
    1. Using transitions
  9. Layout cookbook
    1. Media objects
    2. Columns
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Breadcrumb navigation
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
  10. Tools
    1. Color picker
    2. Box shadow generator
    3. Border image generator

Aligning Items in a Flex Container

One of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time. It enabled proper vertical alignment, so we can at last easily center a box. In this guide, we will take a thorough look at how the alignment and justification properties work in Flexbox.

To center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. We use justify-content to align the item on the main axis, which in this case the inline axis running horizontally.

You can take a look at the code of this example below. Change the size of the container or nested element and the nested element always remains centered.

Properties that control alignment

The properties we will look at in this guide are as follows.

  • justify-content — controls alignment of all items on the main axis.
  • align-items — controls alignment of all items on the cross axis.
  • align-self — controls alignment of an individual flex item on the cross axis.
  • align-content — described in the spec as for "packing flex lines"; controls space between flex lines on the cross axis.
  • gap, column-gap, and row-gap — used to create gaps or gutters between flex items.

We will also discover how auto margins can be used for alignment in flexbox.

The Cross Axis

The align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if flex-direction is row and along the row if flex-direction is column.

We are making use of cross-axis alignment in the most simple flex example. If we add display: flex to a container, the child items all become flex items arranged in a row. They will all stretch to be as tall as the tallest item, as that item is defining the height of the items on the cross axis. If your flex container has a height set, then the items will stretch to that height, regardless of how much content is in the item.

The reason the items become the same height is that the initial value of align-items, the property that controls alignment on the cross axis, is set to stretch.

We can use other values to control how the items align:

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

In the live example below, the value of align-items is stretch. Try the other values and see how all of the items align against each other in the flex container.


Aligning one item with align-self

The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto, which will reset the value to that which is defined on the flex container.

In this next live example, the flex container has align-items: flex-start, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center. You can change the value of align-items or change the values of align-self on the individual items to see how this works.

Changing the main axis

So far we have looked at the behavior when our flex-direction is row, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.

If we change our flex-direction to column, align-items and align-self will align the items to the left and right.

You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.

Aligning content on the cross axis — the align-content property

So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows. In the specification this is described as packing flex lines.

For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.

The align-content property takes the following values:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (not defined in the Flexbox specification)

In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of align-content is space-between, which means that the available space is shared out between the flex lines, which are placed flush with the start and end of the container on the cross axis.

Try out the other values to see how the align-content property works.

Once again we can switch our flex-direction to column in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.

Note: The value space-evenly is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.

Aligning content on the main axis

Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — justify-content. This is because we are only dealing with items as a group on the main axis. With justify-content we control what happens with available space, should there be more space than is needed to display the items.

In our initial example with display: flex on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of justify-content being flex-start. Any available space is placed at the end of the items.

The justify-content property accepts the same values as align-content.

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: space-evenly (not defined in the Flexbox specification)

In the example below, the value of justify-content is space-between. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.

If the main axis is in the block direction because flex-direction is set to column, then justify-content will distribute space between items in that dimension as long as there is space in the flex container to distribute.

Alignment and Writing Modes

Remember that with all of these alignment methods, the values of flex-start and flex-end are writing mode-aware. If the value of justify-content is flex-start and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.

The live example below has the direction property set to rtl to force a right-to-left flow for our items. You can remove this, or change the values of justify-content to see how flexbox behaves when the start of the inline direction is on the right.

Alignment and flex-direction

The start line will also change if you change the flex-direction property — for example using row-reverse instead of row.

In this next example I have items laid out with flex-direction: row-reverse and justify-content: flex-end. In a left to right language the items all line up on the left. Try changing flex-direction: row-reverse to flex-direction: row. You will see that the items now move to the right hand side.

While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. flex-start will be where the start of a sentence of text would begin.

You can switch them to display in the block direction for the language of your document by selecting flex-direction: column. Then flex-start will then be where the top of your first paragraph of text would start.

If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. flex-start will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.

Using auto margins for main axis alignment

We don't have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a justify-self property, however consider the image below. I have three items on one side and two on the other. If I were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention.

Instead we can target item 4 and separate it from the first three items by giving it a margin-left value of auto. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.

In this live example, I have flex items arranged into a row with the basic flex values, and the class push has margin-left: auto. You can try removing this, or adding the class to another item to see how it works.

Creating gaps between items

To create a gap between flex items, use the gap, column-gap, and row-gap properties. The column-gap property creates gaps between items on the main axis. The row-gap property creates gaps between flex lines, when you have flex-wrap set to wrap. The gap property is a shorthand that sets both together.

See also

Found a problem with this page?

Last modified: Feb 18, 2022, by MDN contributors

Your blueprint for a better internet.

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2022 by individual contributors. Content available under a Creative Commons license.