Najnowsze tutoriale tworzenie stron internetowych
 

CSS3 Flexible Box

❮ Poprzedni Następny Rozdział ❯

CSS3 Flexbox

Elastyczne pudełka lub flexbox , jest nowy tryb układ w CSS3.

Zastosowanie flexbox zapewnia, że elementy zachowują się przewidywalnie, gdy układ strony muszą dostosować się do różnych rozmiarów ekranu i różnych urządzeń wyświetlających.

Dla wielu zastosowań, elastyczny model box zapewnia poprawę w stosunku do modelu grupowego, że nie korzysta z pływaków, ani nie Flex kontenera marginesy upadek z okazji jego zawartość.

Pomoc Browser

Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Liczby następnie -webkit- lub -moz- określić pierwszą wersję, która pracowała z prefiksem.

Nieruchomość
Basic support
(single-line flexbox)		 29.0
21.0 -webkit-		 11.0 22.0
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit-		 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1

CSS3 Flexbox Concepts

Flexbox składa się z kontenerów i Flex Flex przedmiotów.

Flex Pojemnik jest deklarowana przez ustawienie display nieruchomego elementu albo flex (renderowane jako blok) lub inline-flex (renderowane jako inline).

Wewnątrz elastycznego pojemnika jest jeden lub więcej elementów Flex.

Uwaga: Wszystko poza elastycznego pojemnika i wewnątrz elastycznego elementu staje się jak zwykle. Schematu flexbox definiuje sposób elastyczny elementy są rozmieszczone wewnątrz elastycznego pojemnika.

Flex elementy są umieszczone wewnątrz pojemnika flex flex wzdłuż linii. Domyślnie jest tylko jedna linia na Flex elastycznego pojemnika.

Poniższy przykład pokazuje trzy flex przedmiotów. Są one ustawione domyślnie: wzdłuż poziomej linii elastycznego, od lewej do prawej:

Przykład

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

Spróbuj sam "

Jest również możliwe, aby zmienić kierunek giętkiej linii.

Jeśli ustawimy direction właściwość rtl (od prawej do lewej), tekst jest rysowany od prawej do lewej, a zarazem elastyczna linia zmienia kierunek, który będzie zmienić układ strony:

Przykład

body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

Spróbuj sam "

Flex Direction

flex-direction właściwość określa kierunek elastycznych elementów wewnątrz elastycznego pojemnika. Domyślna wartość flex-direction jest row (od lewej do prawej, od góry do dołu).

Pozostałe wartości są następujące:

  • row-reverse - Jeśli pisanie-mode (kierunek) jest od lewej do prawej, Flex elementy zostaną rozmieszczone od prawej do lewej
  • column - Jeśli system zapisu jest pozioma, Flex elementy zostaną rozmieszczone w pionie
  • column-reverse - tak samo jak kolumny, ale odwrócony

Poniższy przykład pokazuje wynik za pomocą row-reverse wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik stosując column wartości:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik za pomocą column-reverse wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Nieruchomość uzasadnić-content

justify-content właściwość poziomo wyrównuje elementy elastycznego pojemnika, gdy przedmioty nie wykorzysta całą dostępną przestrzeń na głównej osi.

Możliwe są następujące wartości:

  • flex-start - wartość domyślna. Elementy są umieszczone na początku pojemniku
  • flex-end - przedmioty są umieszczone na końcu pojemnika
  • center - przedmioty są umieszczone w środku pojemnika
  • space-between - przedmioty są umieszczone w przestrzeni między liniami
  • space-around - przedmioty są umieszczone w przestrzeni przed, pomiędzy i po liniach

Poniższy przykład pokazuje wynik używając flex-end wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik używając center wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik używając space-between wartością:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik używając space-around wartości:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

ALIGN-składników majątkowych

align-items nieruchomości w pionie wyrównuje elementy elastycznego pojemnika, gdy przedmioty nie wykorzysta całą dostępną przestrzeń na przekroju osi.

Możliwe są następujące wartości:

  • stretch - wartość domyślna. Elementy są rozciągane pojemnik
  • flex-start - przedmioty są umieszczone w górnej części zbiornika
  • flex-end - przedmioty są umieszczone w dolnej części pojemnika
  • center - Pozycje są umieszczone w środku pojemnika (w pionie)
  • baseline - Pozycje są umieszczone na początku badania pojemnika

Poniższy przykład pokazuje wynik za pomocą stretch wartość (jest to wartość domyślna):

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik używając flex-start wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik używając flex-end wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik używając center wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik z wykorzystaniem baseline wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Flex-wrap nieruchomości

flex-wrap właściwość określa, czy Flex elementy powinny zawinąć czy nie, jeśli nie ma wystarczająco dużo miejsca dla nich w jednej linii Flex.

Możliwe są następujące wartości:

  • nowrap - wartość domyślna. Elastyczne elementy nie będą zawijać
  • wrap - Elastyczne elementy będą zawijać w razie potrzeby
  • wrap-reverse - Elastyczne elementy będą zawijać, w razie potrzeby, w odwrotnej kolejności

Poniższy przykład pokazuje wynik używając nowrap wartość (jest to wartość domyślna):

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik stosując wrap wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Poniższy przykład pokazuje wynik stosując wrap-reverse wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

Spróbuj sam "

Nieruchomość align-content

align-content właściwość modyfikuje zachowanie flex-wrap nieruchomości. Jest ona podobna do align-items , ale zamiast wyrównania flex przedmioty, to wyrównuje flex linie.

Możliwe są następujące wartości:

  • stretch - wartość domyślna. Linie rozciągnąć do podjęcia pozostałą przestrzeń
  • flex-start - Linie są pakowane w kierunku początku elastycznego kontenera
  • flex-end - Linie są pakowane w kierunku końca elastycznego kontenera
  • center - Linie są pakowane w kierunku środka pojemnika flex
  • space-between - linie są rozmieszczone równomiernie w kontenerze elastycznego
  • space-around - Linie są równomiernie rozłożone w elastycznego pojemnika ze spacjami pół-size na obu końcach

Poniższy przykład pokazuje wynik używając center wartość:

Przykład

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

Spróbuj sam "

Flex właściwości elementu

Kolejność

order właściwość określa kolejność elastycznego elementu w stosunku do pozostałej części elastycznych znajdujących się wewnątrz samego pojemnika:

Przykład

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

Spróbuj sam "

Margines

Ustawianie margin: auto; pochłonie dodatkową przestrzeń. Może być stosowany do pchania flex elementów w różnych położeniach.

W poniższym przykładzie ustawimy margin-right: auto; na pierwszym elastycznego elementu. Spowoduje to, że dodatkowe miejsce być wchłaniane z prawej strony tego elementu:

Przykład

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

Spróbuj sam "

idealne centrowania

W poniższym przykładzie będziemy rozwiązywać problemy niemal codziennie: Perfect centrowanie.

Jest to bardzo łatwe schematu flexbox. Ustawianie margin: auto; uczyni element doskonale skupione w obu osiach:

Przykład

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

Spróbuj sam "

align-self

align-self własnością Flex elementów nadpisuje ALIGN-składników majątkowych Flex kontenera dla tego elementu. Ma te same wartości jak możliwe align-items nieruchomości.

Poniższy przykład ustawia różne wartości align-siebie do każdego elementu giętkiego:

Przykład

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

Spróbuj sam "

zgiąć

flex właściwość określa długość elementu elastycznego, w stosunku do pozostałej części flex znajdujących się wewnątrz samego pojemnika.

W poniższym przykładzie pierwszy elastyczny element pochłonie 2/4 wolnej przestrzeni, a pozostałe dwa elementy Flex pochłonie 1/4 wolnej przestrzeni każdego:

Przykład

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

Spróbuj sam "

Przykłady

Więcej przykładów

Tworzenie strony internetowej z elastycznego schematu flexbox
Ten przykład pokazuje, jak stworzyć stronę internetową z reagujący układ schematu flexbox.

CSS3 Właściwości schematu flexbox

Poniższa tabela zawiera listę właściwości CSS używane z schematu flexbox:

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand propert for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container's align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same container

❮ Poprzedni Następny Rozdział ❯