Skip to main content

CSS Flexbox Tutorial – What Is Flex and Inline-Flex?

Flexbox makes browsers display selected HTML elements as flexible box models.

Flexbox allows easy resizing and repositioning of a flexible container and its items one-dimensionally.

info
  • "One-dimensionally" means Flexbox allows laying out box models in a row or column at a time. In other words, Flexbox cannot lay out box models in a row and column at the same time.
  • Flexbox is sometimes called a flexible box layout module.
  • Use the grid layout module if you need to resize and reposition elements two-dimensionally.

Flex Container vs. Flex Item: What's the Difference?

A flex container is an HTML element whose display property's value is flex or inline-flex.

Flex items are the direct children of a flex container.

Illustration of a flex container and a flex item

A flex container (the large yellow area in the image) is an HTML element whose display property's value is flex or inline-flex. Flex items (the smaller boxes within the yellow container) are the direct children of a flex container.

What Is a flex Value in CSS?

flex tells browsers to display the selected HTML element as a block-level flexible box model.

In other words, setting an element's display property's value to flex turns the box model into a block-level flexbox.

Here's an example:

section {
display: flex;
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the flex value to convert the HTML document's <section> elements from regular <section> nodes to block-level flexible box models.

note
  • Converting an HTML node to a flexible box model makes the element's direct children become flexible items.
  • The display: flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Let's now discuss inline-flex.

What Is an inline-flex Value in CSS?

inline-flex tells browsers to display the selected HTML element as an inline-level flexible box model.

In other words, setting an element's display property's value to inline-flex turns the box model into an inline-level flexbox.

Here's an example:

section {
display: inline-flex;
background-color: orange;
margin: 10px;
padding: 7px;
}

div {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the inline-flex value to convert the HTML document's <section> elements from regular <section> nodes to inline-level flexible box models.

note
  • Converting an HTML node to a flexible box model makes the element's direct children become flexible items.
  • The display: inline-flex directive only affects a box model and its direct children. It does not affect grandchildren nodes.

Properties for Specifying Flexbox's Layout

On converting a regular HTML element to a flex (or inline-flex) box model, Flexbox provides two types of properties for positioning the flexible box and its direct children:

  • Flexible container's properties
  • Flexible item's properties

What Are the Flexible Container's Properties?

A flexible container's properties specify how browsers should layout items within the flexible box model.

note

We define a flexible container's property on the flex container, not its items.

The six (6) types of flex container properties are:

What Are the Flexible Item's Properties?

A flexible item's properties specify how browsers should layout a specified item within the flexible box model.

note

We define a flexible item's property on the flex item, not its container.

The six (6) types of flex item properties are:

Buy your CSS Flexbox Explained Visually book on Amazon

Overview

This article discussed what a CSS flexbox is. We also discussed the differences between a flex container and flex items.

Find all your favorite books at booksamillion.com.