CSS3 Flexible Box
CSS3 Flexible Box to nowy tryb układu.
CSS3 Flexible Box (Flexible Box lub schematu flexbox), gdy strona jest konieczność dostosowania się do różnych rozmiarów ekranu i typy urządzeń, gdy elementy muszą zapewnić właściwe rozmieszczenie zachowanie.Celem wprowadzenia elastyczny model układu woreczek jest zapewnienie bardziej wydajnego sposobu, aby zorganizować dla pojemnika podelementów, wyrównywania i dystrybucji pustej przestrzeni.
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji nieruchomości.
Natychmiast po numerze -webkit- przeglądarki lub -moz- określonym prefiksem.
| nieruchomość | |||||
|---|---|---|---|---|---|
| Podstawowe wsparcie (Single-linia schematu flexbox) | 29,0 21,0 -webkit- | 11,0 | 22,0 18,0 -moz- | 6,1 -webkit- | 12,1 -webkit- |
| Multi-line schematu flexbox | 29,0 21,0 -webkit- | 11,0 | 28,0 | 6,1 -webkit- | 17,0 15,0 -webkit- 12,1 |
Zawartość CSS3 Flexible Box
Elastyczne wykonanej z elastycznego pojemnika (Flex pojemnik) oraz sprężystych elementów podrzędnych (pozycja Flex) składników.
Elastyczny pojemnik poprzez ustawienie właściwości wyświetlacza jest Flex lub inline-flex będzie określona jako elastycznego pojemnika.
Elastyczny pojemnik zawiera jeden lub więcej elementów sprężystych podrzędne.
Uwaga: elastyczny pojemnik zewnętrzny, a element sprężysty jest dzieckiem normalnym renderowania. Elastyczne pole określa tylko, jak sprężyste elementy podrzędne w obrębie układu elastycznego pojemnika.
Elastyczne sub-element jest zwykle wyświetlane w oknie wiersza elastycznego. Domyślnie każdy pojemnik jest tylko jedna linia.
Poniżej przedstawiono element elastyczny elementy podrzędne są wyświetlane w jednej linii, od lewej do prawej:
Przykłady
<Html>
<Head>
<Style>
.flex pojemnik {
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</ Style>
</ Head>
<Body>
<Div class = "flex-pojemnik">
<Div class = "flex-item"> Flex pkt 1 </ div>
<Div class = "flex-item"> Flex pkt 2 </ div>
<Div class = "flex-item"> Flex pkt 3 </ div>
</ Div>
</ Body>
</ Html>
Spróbuj »
Oczywiście, możemy zmodyfikować układ.
Jeśli ustawimy direction właściwość rtl (od prawej do lewej), rozmieszczenie elastycznych podelementów zmieni, układy stron zmiana następuje również:
Przykłady
Kierunek: RTL;
}
.flex pojemnik {
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
Spróbuj »
flex-kierunek
flex-direction kolejność określa sprężystego elementu podrzędnego w kontenerze nadrzędnym.
gramatyka
flex-direction: row | row-reverse | column | column-reverse
flex-direction są następujące wartości:
- wiersz: bocznie od lewej do prawej strony (z lewej), układ domyślny.
- Wiersz-reverse: wstecz poprzecznie wyrównane (z wyrównaniem do prawej, do przodu od tylnego rzędu, ostatni na górze.
- Kolumna: układ pionowy.
- column-reverse: reverse pionowy układ, z tylnego rzędu do przodu, a na końcu wiersza na górze.
Poniższy przykład ilustruje row-reverse wykorzystania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-flex-kierunek: wiersz odwrócić;
flex-kierunek: wiersz-reverse;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Poniższy przykład ilustruje column używany:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-flex-kierunek: Kolumna;
flex-kierunek: Kolumna;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższe przykłady pokazują column-reverse wykorzystania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-flex-kierunek: kolumna odwrócić;
flex-kierunek: kolumna odwrotna;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
atrybut uzasadnić-content
wyrównanie zawartości (uzasadnić-zawartości) na sprężystych właściwości pojemnika aplikacji, sprężyste elastyczne elementy pojemnik linii wzdłuż osi głównej (z główną osią symetrii).
Składnia uzasadnienia, zawartość jest następująca:
justify-content: flex-start | flex-end | center | space-between | space-around
Każda analiza wartości:
- Flex-start:
Elastyczny projekt pierwszej linii obok nadzienia. Jest to ustawienie domyślne. Pierwszą główną start od zewnętrznych krawędzi sprężystego elementu jest umieszczone na krawędziach głównego początku linii, a kolejne równo z kolei umieszczony elastyczny termin.
- flex-end:
Elastyczny projekt do końca następnej linii do napełniania. Pierwsze egzemplarze główne klasy spoza elastycznych nici są umieszczone w krawędzi głównego końcu linii, a kolejne równo z kolei umieszczony elastyczny termin.
- centrum:
Elastyczny projekt wyśrodkowany obok wypełnienia. (Jeśli pozostała wolna przestrzeń jest ujemna, projekt będzie również przelewać elastyczność w obu kierunkach).
- Przestrzeń pomiędzy:
Elastyczny projekt równomiernie rozmieszczone w wierszu. Jeżeli przestrzeń jest ujemny lub tylko elastyczne pojęcie wartość równoważna z giętkiego początku. W przeciwnym razie, głównego zacząć od zewnętrznych krawędzi pierwszego wiersza i elastycznego dostosowywania pozycji, natomiast linia main-end i uboczny margines ostatnia elastyczną wyrównanie Termin i rozmieszczenie pozostałych elementów na elastycznej linii, obok równo rozmieszczone elementy.
- Przestrzeń wokół:
Elastyczny projekt równomiernie rozmieszczone w linii, po obu stronach lewej części tej przestrzeni. Jeżeli przestrzeń jest ujemny lub tylko elastyczne pojęcie, wartość jest równoważna do centrum. W przeciwnym razie, elastyczność projektu wzdłuż linii przesyłowej i równo oddalone od siebie (na przykład, 20 pikseli), pozostawiając połowę odstępu (1/2 * 20 pikseli = 10px) między głową i ogonem obustronnie elastycznego pojemnika.
Wizualizacje przedstawiają:
Poniższy przykład demonstruje flex-end wykorzystania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-usprawiedliwić-content: Flex-end;
usprawiedliwić-zawartość: Flex-end;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższy przykład demonstruje center korzystanie dydaktycznego:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-usprawiedliwić-zawartość: center;
usprawiedliwić-zawartość: center;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższe przykłady pokazują space-between wykorzystaniem:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-usprawiedliwić-zawartość: przestrzeń pomiędzy nimi;
usprawiedliwić-zawartość: przestrzeń pomiędzy nimi;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższe przykłady pokazują space-around używania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-usprawiedliwić-zawartość: Przestrzeń wokół;
usprawiedliwić-zawartość: Przestrzeń wokół;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
ALIGN-przedmioty i usługi
align-items określone lub pobierania elementu sprężystego na stronie osi skrzynki (oś pionowa) kierunku ustawienia.
gramatyka
align-items: flex-start | flex-end | center | baseline | stretch
Każda analiza wartości:
- Flex-start: granica strona elementu elastycznego pudełka osi (oś pionowa) w stosunku do pozycji wyjściowej osi żywego stronie granicy linii wyjścia.
- flex-end: elastyczna granica stronie osi elementu box (oś pionowa) w stosunku do pozycji wyjściowej, aby żyć końcówkę wału boku linia graniczna.
- środek: elastyczny element pudełko umieszczone w środkowej części linii po stronie osi (oś pionowa) dalej. (Jeśli rozmiar jest mniejszy niż wielkość sprężystego elementu linii pola, to jest tej samej długości w obu kierunkach nadmiaru).
- bazowy: Elementy takie jak pudełko elastycznego wału i wewnętrznej linii wału strona jest taka sama wartość "flex-start" odpowiednik. W pozostałych przypadkach wartość będzie zaangażowany w wyjściowym ustawieniu.
- rozciągnąć: Jeśli rozmiar atrybutu polu Margines określa wielkość strony wału jest 'auto', jej wartość będzie zbliżona do elementów liniowych jak wielkość, ale pójdą właściwość "min / max-width / height ' ograniczeń.
Poniższy przykład pokazuje stretch(默认值) korzystania z:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-align-przedmiotów rozciągają;
align-pozycje: rozciągnąć;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższy przykład demonstruje flex-start używania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-align-pozycje: Flex-start,
align-pozycje: Flex-startu;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższy przykład demonstruje flex-end wykorzystania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-align-pozycje: Flex-end;
align-pozycje: Flex-end;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższy przykład demonstruje center korzystanie dydaktycznego:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-align: center-pozycje;
align-pozycje: centrum;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższy przykład demonstruje baseline zużycia:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-align: baseline-pozycje;
align-elementy: punkt odniesienia;
width: 400px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Obiekt Flex-wrap
Atrybutflex-wrap jest używany do określenia elastycznej box dziecko tryb elementem opasania.
gramatyka
flex-flow: ||
Każda analiza wartości:
- nowrap - domyślnie elastyczny pojemnik w jednej linii.W tym przypadku odporny dziecko może przepełnić pojemnika.
- Wrap - elastyczna kontenerów wiele wierszy.Przepełnienie część sprężystego dziecko znajduje się w tym przypadku do nowej linii, linia wewnętrzna przerwa nastąpi podklucz
- zawinąć-reverse - w odwrotnej kolejności zawijania.
Poniższy przykład demonstruje nowrap wykorzystania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-flex-wrap: nowrap;
Flex-wrap: nowrap;
width: 300px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższy przykład demonstruje wrap użytkowania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-flex-wrap: zawinąć;
Flex-zawijania: zawijany;
width: 300px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
Poniższy przykład demonstruje wrap-reverse wykorzystania:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-flex-wrap: zawinąć odwróconych;
Flex-wrap: zawinąć odwróconych;
width: 300px;
height: 250px;
background-color: jasnoszary;
}
Spróbuj »
atrybutu align-content
align-content atrybut jest używany do modyfikacji flex-wrap zachowanie atrybutu. Podobne align-items , ale nie jest ustawiony wyrównanie sprężystych elementów podrzędnych, ale ustawić wyrównanie każdego wiersza.
gramatyka
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Każda analiza wartości:
-
stretch- domyślne. Każda linia potrwają zajmują pozostałą przestrzeń. -
flex-start- rzędy ułożonych w stos pudełek do położenia początkowego elastycznego pojemnika. -
flex-end- rzędy ułożonych w stos pudełek do położenia końcowego elastycznego pojemnika. -
center- rzędy ułożonych pudełek do położenia środkowego elastycznego pojemnika. -
space-between- każdy wiersz elastycznego pojemnika worka równomiernie. -
space-around- każda linia w elastycznym pojemniku worka równo rozłożone pomiędzy dwoma końcami zachować połowę podelementów i podelementów rozstaw rozmiar.
Poniższy przykład demonstruje center korzystanie dydaktycznego:
Przykłady
Wyświetlacz: -webkit-flex;
Wyświetlacz: wyginać;
-webkit-flex-wrap: zawinąć;
Flex-zawijania: zawijany;
-webkit-align: Treść: center;
align: treść: center;
width: 300px;
height: 300px;
background-color: jasnoszary;
}
Spróbuj »
Elastyczne cechy sub-element
sekwencja
gramatyka
order:
Każda analiza wartości:
- <Integer>: wartość całkowita używana do określenia kolejności, w której mała wartość górnej powierzchni. Może być ujemne.
order do ustawiania właściwości w ramach sprężystych właściwościach sprężystych elementów pojemnika podrzędnych:
Przykłady
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
Kolejność: -1;
}
Spróbuj »
wyrównać
Ustawienia "Margines" jest wartość "auto", automatycznie uzyskać elastyczny pojemnik w pozostałej przestrzeni. Więc ustawić pionową wartość marginesu "auto", pozwala na elastyczne elementy podrzędne są całkowicie koncentruje się na kierunku dwóch osi elastycznego pojemnika.
Poniższe przykłady są na pierwszym elemencie sub-elastyczna ustawionym margin-right: auto; . Pozostałe miejsca zostaną umieszczone we właściwych elementów:
Przykłady
background-color: cornflowerblue;
szerokość: 75 pikseli;
wysokość: 75 pikseli;
margin: 10px;
}
.flex-element: first-child {
margin-right: auto;
}
Spróbuj »
Idealny środek
Poniższe przykłady będą idealnym rozwiązaniem problemów zwykle napotykają centrum.
Elastyczna box, ośrodek staje się bardzo proste, po prostu chcesz ustawić margin: auto; może sprawić, że elastyczne elementy podrzędne w kierunku osiowym na dwóch całkiem w środku:
Przykłady
background-color: cornflowerblue;
szerokość: 75 pikseli;
wysokość: 75 pikseli;
margin: auto;
}
Spróbuj »
align-self
align-self atrybut jest używany do ustawiania kierunku wyrównania elementu sprężystego samo z boku osi (oś pionowa).
gramatyka
align-self: auto | flex-start | flex-end | center | baseline | stretch
Każda analiza wartości:
- auto: Jeżeli "align-ja 'wartość' auto ', wartość wyliczona elementu dominującego elementu" align-Items "wartość, jeżeli nie ma rodzica, obliczoną wartość" rozciągnięcia ".
- Flex-start: granica strona elementu elastycznego pudełka osi (oś pionowa) w stosunku do pozycji wyjściowej osi żywego stronie granicy linii wyjścia.
- flex-end: elastyczna granica stronie osi elementu box (oś pionowa) w stosunku do pozycji wyjściowej, aby żyć końcówkę wału boku linia graniczna.
- środek: elastyczny element pudełko umieszczone w środkowej części linii po stronie osi (oś pionowa) dalej. (Jeśli rozmiar jest mniejszy niż wielkość sprężystego elementu linii pola, to jest tej samej długości w obu kierunkach nadmiaru).
- bazowy: Elementy takie jak pudełko elastycznego wału i wewnętrznej linii wału strona jest taka sama wartość "flex-start" odpowiednik. W pozostałych przypadkach wartość będzie zaangażowany w wyjściowym ustawieniu.
- rozciągnąć: Jeśli rozmiar atrybutu polu Margines określa wielkość strony wału jest 'auto', jej wartość będzie zbliżona do elementów liniowych jak wielkość, ale pójdą właściwość "min / max-width / height ' ograniczeń.
Poniższy przykład pokazuje, elastyczne podelementy align-samodzielne efekt zastosowania różnych wartości:
Przykłady
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: Flex-start,
Self-align: Flex-startu;
}
.item2 {
-webkit-align-self: Flex-end;
Self-align: Flex-end;
}
.item3 {
-webkit-align-self: center;
Self-align: center;
}
.item4 {
-webkit-align-self: bazowy;
Self-align: baseline;
}
.item5 {
-webkit-align-ja: rozciąganie;
Self-align: rozciągnąć;
}
Spróbuj »
Flex
flex atrybut jest używany do określenia sposobu alokacji przestrzeni dyskowej dla elastycznych elementów podrzędnych.
gramatyka
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
Każda analiza wartości:
- none: none oblicz Hasło brzmi: 0 0 auto
- [Flex-grow]: określenie współczynnika rozszerzalności elementem sprężystym polu.
- [Flex termokurczliwe]: określenie współczynnika skurczu elementem sprężystym polu.
- [Flex Podstawa]: Domyślna wartość odniesienia definiuje element elastyczny pudełka.
Poniższy przykład, pierwszy sub-elastyczny element zajmuje 2/4 przestrzeni, pozostałe dwa każda 1/4 Miejsce:
Przykłady
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
uginać: 2;
}
.item2 {
-webkit-flex: 1;
uginać: 1;
}
.item3 {
-webkit-flex: 1;
uginać: 1;
}
Spróbuj »
Więcej przykładów
Tworzenie czułe strony za pomocą elastycznego oknie
Elastyczne właściwości CSS3 Box
Poniższa tabela zawiera powszechnie stosowane do pola we właściwościach elastycznych:
| nieruchomość | opis |
|---|---|
| pokaz | Określa typ elementu HTML skrzynki. |
| flex-kierunek | Określ, jak zorganizować elementy neutronowej elastycznego pojemnika |
| usprawiedliwić-content | Element sprężysty w polu wrzeciona (poziomej) kierunku ustawienia. |
| ALIGN-przedmioty | Elastyczny element osi boczne okno (oś pionowa) kierunek wyrównania. |
| Flex-wrap | Czy elastycznych skrzynkowych okład podelementów poza kontenera nadrzędnego. |
| align-content | Zmodyfikować zachowanie własności flex-oblewania, podobna do wyrównania-przedmioty, ale nie jest ustawiona pod-elementy są wyrównane, ale wyrównanie zestawu linii |
| flex-flow | flex-kierunek i Flex-wrap skrótowym |
| zamówienie | Elastyczny element podrzędny okno zlecenia. |
| align-self | Za pomocą sprężystych elementów podrzędnych. Przykryć pojemnik ALIGN-składników majątkowych. |
| Flex | Jak skonfigurować element elastyczny box dziecka przydzielonego miejsca. |