Flexbox-Day01-Introduction

發表於

Flexbox-Day01-Introduction

「我們要做的是提升生活品質，而不是延緩死亡。」- Patch Adams

WHAT THEFLEXBOX?!

  • A simple, free 20 video course that will help you master CSS Flexbox!

1.Introduction

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 2.Introduction to Flexbox */
    display: flex;
    min-height: 100vh;

/* 3.Working with Flexbox flex-direction */
/* flex-direction: row / row-reverse / column / column-reverse */
    flex-direction: row;

/* 4.Wrapping elements with Flexbox */
/* flex-wrap: wrap / no-wrap / wrap-reverse */
    flex-wrap: wrap;
/*.box*/
    width: calc(33.33333% - 2%);
    margin: 1%;
/* box-sizing: border-box; */
    padding: 20px;
    border: 5px   solid   goldenrod;

/* 5.Flexbox Ordering */
/* .box3 */
    order: -1;
/* .box7 */
    order: 2;