GarMax Logo
GarMax Logo

CSS Flexbox

CSS Flexbox

Z wejściem Flexbox cięcie siatek bardzo się ułatwiło. Jednak, jak zawsze istnieją pewne problemy z kompatybilnością przeglądarek i trzeba poprawnie dodawać wendorne prefiksy, żeby Państwa kod dobrze działał w każdej przeglądarce. Niżej chcemy podzielić się z Wami przykładami właściwościej Flexbox które są całkowicie responsywne.

Flex Kontener

CSS
1
2
3
4
5
.flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

 

Przeniesienie nie zmieszczających elementów w nowy rząd

CSS
1
2
3
4
5
.flex-wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

 

Wyrównanie poziome

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flex-left {
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
 
.flex-center {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
 
.flex-right {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

 

Wyrównanie pionowe

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flex-top {
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
 
.flex-middle {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
 
.flex-bottom {
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

 

Wyrównanie przestrzeniej

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.flex-space-between {
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
 
 
.flex-wrap-space-around {
    -ms-flex-line-pack: distribute;
    -webkit-align-content: space-around;
    align-content: space-around;
}

 

Orientacja

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flex-column {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
 
.flex-column-reverse {
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
 
.flex-row-reverse {
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

 

Kolejność elementu

CSS
1
2
3
4
5
6
7
8
9
10
11
.flex-order-first {
    -ms-flex-order: -1;
    -webkit-order: -1;
    order: -1;
}
 
.flex-order-last {
    -ms-flex-order: 99;
    -webkit-order: 99;
    order: 99;
}

 

CSS Gradient Generator

Zostaw komentarz

Możesz zalogować się aby nie wypełniać dodatkowe pola.