CSS Flexbox

[Guest]

CSS Flexbox



1
2
3
4
5
6
7
8


Try it Yourself »


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.

Browser Support
The flexbox properties are supported in all modern browsers.










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>


Try it Yourself »



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













★
+1

Reference: https://www.w3schools.com/css/css3_flexbox.asp