Flexbox-Day05-Application

發表於

FRONT-END BACK-END

Flexbox-Day05-Application

Find purpose, the means will follow. - 聖雄甘地

WHAT THEFLEXBOX?!

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

Equal height columns

1
2
3
4
5
6
7
8
9
10
/* 18.Flexbox Equal height columns and leftover elements */
.elements{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    }

.item{
    flex: 0   1   calc(33.33%   -   20px);
    }

Single line form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*  19.single line form*/
.cover{
    display: flex;
    justify-content: center;
    align-items: center;
    }

.flex-from{
    display: flex;
    border: 20px   solid   rgba(0, 0, 0, .2);
    border-radius: 5px;
    }

input\[type="search"\]{
    flex-basis: 500px;
    }

Mobile app layout

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
/* 20.Create a mobile app layout with Flexbox */
.app-wrap{
    display: flex;
    flex-direction: column;
    }

.app-wrap   >   *{
    flex: 1   auto;
    }

.app-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

.content{
    overflow: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    }

.icon-bar{
    display: flex;
    }

.icon-bar   a{
    flex: 1;
    }