Monaen's WikiCSS Layout 2017-03-17

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:

▲