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