Flexbox-Day04-Application

發表於

Mondrian Composition II in Red, Blue, and Yellow

Flexbox-Day04-Application

風格派運動幕後藝術家和非具象繪畫的創始者之一 - Piet Cornelies Mondrian

WHAT THEFLEXBOX?!

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

slider-nav

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
33
34
/* 16.Nesting Flexbox for vertical and horizontal centering with Flexbox */
.slider-nav   ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    }

.slider-nav   li{
    flex:2; /\* flex item */
    border: 1px   solid   goldenrod;
    text-align: center;
    display: flex; /\* flex container */
    }

.slider-nav   .arrow{
    flex: 1;
    }｀

.slider-nav   a{
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.slider-nav spen{
    display: block;
    width: 100%;
    }

.arrow   a{
    font-size: 30px;
    }

price-grid

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
.price{
    font-size: 50px;
    font-family: serif;
    margin: 10px   0;
    }

.price-grid{
    max-width: 750px;
    margin: 0   auto;
    border: 1px   solid   goldenrod; 
    display: flex;
    align-items: center;
    }

.plan{
    background: rgba(255, 255, 255, .2);
    margin: 20px;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    flex:1;
    flex-basis: 80%;
    }

.plan:last-child,.plan:first-child{
    flex:1   1   100%;
    }