Flexbox-Day03-Application

發表於

Application

Flexbox-Day03-Application

遇到任何情況都盡心盡力處理，事後並自我檢討，了解缺點，謀求改進。 - 王永慶

WHAT THEFLEXBOX?!

  • A simple, free 20 video course that will help you master CSS Flexbox!
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
/* 14.Pure Flexbox navigation code along*/
.flex-nav   ul {
    border: 1px   solid   black;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.flex-nav   li {
    flex: 3;
} 
.flex-nav   .social {
    flex: 1;
}

@media   all   and (max-width:960px) {
    .flex-nav ul {
    flex-wrap: wrap;
}
    .flex-nav li{
    flex: 1   1   50%;
}
    .flex-nav .social{
    flex: 1   1   25%;
}

}

@media   all   and (max-width:768px) {
    .flex-nav li{
    flex-basis: 100%;
}
}

Reordering

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
35
36
/* 15.Mobile content reordering with Flexbox*/
@media   all   and (max-width:768px) {

    .flex-nav   li{
    flex-basis: 100%;
    }
    .wrapper{
    display: flex;
    flex-direction: column;
    }
    .wrapper   >   * {
    order: 9999;
    }
    .flex-nav{
    order: 1;
    }
    .toggleNav {
    display: block;
    }
    .flex-nav   ul{
    display: none;
    }
    .flex-nav   ul.open{
    display: flex;
    }
    .top{
    order:2;
    }
    .details{
    order: 3;
    }
    .hero{
    order: 4;
    }

}