CSS Style Layout

Flexbox Layout

Introduction

Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

For examples:

1
2
3
.app {
display: flex;
}

This rule as-is works with Chrome 29+, IE 11+, and Mozilla 28+. In order to support Safari, the -webkit- prefix must be added:

1
2
3
4
.app {
display: -webkit-flex; /*to support Safari*/
display: flex;
}

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
* {
border: 1px solid red !important;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.grid {
margin: 0 auto;
max-width: 1200px;
width: 100%;
}

.row {
width: 100%;
margin-bottom: 20px;
display: flex;
}

.col-1 {
width: 8.33%;
}

.col-2 {
width: 16.66%;
}

.col-3 ......
  • Flex-wrap: The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* Syntax */

    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;

    /* Global values */
    flex-wrap: inherit;
    flex-wrap: initial;
    flex-wrap: unset;
  • Flex

  • Another guide on flex
  • visual demos of flex-wrap

Resource

Flex documentation: