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.

Note

• “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.

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:

CSS

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

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

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>
<section>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

Try Editing It

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.

CodeSweetly ads

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:

CSS

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

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

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>
<section>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

Try Editing It

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:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

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:

• align-self
• order
• flex-grow
• flex-shrink
• flex-basis
• flex