CSS Flexbox

❮ Previous Next ❯

1

2

3

4

5

6

7

8

CSS Flexbox Layout Module

Before Flexbox Layout, there were four different ways to arrange elements on a web page:

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 simplifies creating flexible and responsive layouts without the need for float or positioning.

Flexbox Elements

To begin using the Flexbox system, you must first create a flex container.

1

2

3

The element shown above is like a box (the blue part) that can arrange three items inside it.

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        background-color: DodgerBlue;
      }

      .flex-container>div {
        background-color: #f1f1f1;
        margin: 10px;
        padding: 20px;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Create a Flex Container</h1>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    <p>A flexible layout needs a main element where the "display" property is set to "flex"..</p>
    <p>The children directly inside the flexible box automatically become flexible too.</p>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Flexbox

1

2

3

4

5

6

7

8

CSS Flexbox Layout Module

Flexbox Elements

1

2

3

Web Development