---
title: CSS Flexbox
description: "> ## CSS Flexbox Layout Module > > > > Before the Flexbox Layout module, there were four layout modes: > > > > - Block, for sections in a webpage > - Inline, for text > - Table, for…"
url: "https://apprentice.mn/docs/css-flexbox/"
updated: "2021-05-13"
category: CSS
---

# CSS Flexbox

> ## CSS Flexbox Layout Module
>
>
>
> Before the Flexbox Layout module, there were four layout modes:
>
>
>
> - Block, for sections in a webpage
> - Inline, for text
> - Table, for two-dimensional table data
> - Positioned, for explicit position of an element
>
>
>
> The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
>
>
>
> ---

       1 2 3 4 5 6 7 8

##  

## Browser Support

The flexbox properties are supported in all modern browsers.

| Chrome | Internet explorer | Mozila Firefox | Safari | Opera |
| --- | --- | --- | --- | --- |
| 29.0 | 11.0 | 22.0 | 10 | 48 |

---

##  

## Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

           1 2 3

The element above represents a flex container (the blue area) with three flex items.

### Example

A flex container with three flex items:

      `<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>`

You will learn more about flex containers and flex items in the next chapters.

          [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flexbox%2F&linkname=CSS%20Flexbox](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flexbox%2F&linkname=CSS%20Flexbox)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flexbox%2F&linkname=CSS%20Flexbox](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flexbox%2F&linkname=CSS%20Flexbox)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flexbox%2F&linkname=CSS%20Flexbox](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flexbox%2F&linkname=CSS%20Flexbox)[https://www.addtoany.com/share](https://www.addtoany.com/share)