Najlepszy samouczek CSS3 Flexible Box W 2024 r. W tym samouczku możesz dowiedzieć się Pomoc Browser,Zawartość CSS3 Flexible Box,flex-kierunek,atrybut uzasadnić-content,ALIGN-przedmioty i usługi,Obiekt Flex-wrap,atrybutu align-content,Elastyczne cechy sub-element,Więcej przykładów,Elastyczne właściwości CSS3 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.
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 |
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:
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ż:
flex-direction
kolejność określa sprężystego elementu podrzędnego w kontenerze nadrzędnym.
flex-direction: row | row-reverse | column | column-reverse
flex-direction
są następujące wartości:
Poniższy przykład ilustruje row-reverse
wykorzystania:
Poniższy przykład ilustruje column
używany:
Poniższe przykłady pokazują column-reverse
wykorzystania:
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:
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.
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.
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).
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.
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:
Poniższy przykład demonstruje center
korzystanie dydaktycznego:
Poniższe przykłady pokazują space-between
wykorzystaniem:
Poniższe przykłady pokazują space-around
używania:
align-items
określone lub pobierania elementu sprężystego na stronie osi skrzynki (oś pionowa) kierunku ustawienia.
align-items: flex-start | flex-end | center | baseline | stretch
Każda analiza wartości:
Poniższy przykład pokazuje stretch(默认值)
korzystania z:
Poniższy przykład demonstruje flex-start
używania:
Poniższy przykład demonstruje flex-end
wykorzystania:
Poniższy przykład demonstruje center
korzystanie dydaktycznego:
Poniższy przykład demonstruje baseline
zużycia:
Atrybutflex-wrap jest używany do określenia elastycznej box dziecko tryb elementem opasania.
flex-flow: ||
Każda analiza wartości:
Poniższy przykład demonstruje nowrap
wykorzystania:
Poniższy przykład demonstruje wrap
użytkowania:
Poniższy przykład demonstruje wrap-reverse
wykorzystania:
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.
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:
order:
Każda analiza wartości:
order
do ustawiania właściwości w ramach sprężystych właściwościach sprężystych elementów pojemnika podrzędnych:
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:
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:
align-self
atrybut jest używany do ustawiania kierunku wyrównania elementu sprężystego samo z boku osi (oś pionowa).
align-self: auto | flex-start | flex-end | center | baseline | stretch
Każda analiza wartości:
Poniższy przykład pokazuje, elastyczne podelementy align-samodzielne efekt zastosowania różnych wartości:
flex
atrybut jest używany do określenia sposobu alokacji przestrzeni dyskowej dla elastycznych elementów podrzędnych.
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
Każda analiza wartości:
Poniższy przykład, pierwszy sub-elastyczny element zajmuje 2/4 przestrzeni, pozostałe dwa każda 1/4 Miejsce:
Tworzenie czułe strony za pomocą elastycznego oknie
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. |