Elastyczny układ pudełka
Wraz z pojawieniem się CSS Flexible Box wiele koszmarów 1 projektantów stron internetowych zostało rozwiązanych. Jeden z najbardziej hackujących, wyrównanie pionowe. Teraz jest to możliwe nawet na nieznanych wysokościach .
„Dwie dekady włamań układowych dobiegają końca. Może nie jutro, ale wkrótce i do końca życia”.
- CSS Legendary Eric Meyer na W3Conf 2013
Flexible Box (lub w skrócie Flexbox) to nowy system układu zaprojektowany specjalnie do celów układu. Te stany specyfikacja :
Układ Flex jest powierzchownie podobny do układu bloków. Brakuje w nim wielu bardziej złożonych właściwości tekstowych lub ukierunkowanych na dokumenty, których można użyć w układzie bloków, takich jak zmiennoprzecinkowe i kolumny. W zamian zyskuje proste i wydajne narzędzia do rozmieszczania przestrzeni i wyrównywania zawartości w sposób, którego często potrzebują aplikacje internetowe i złożone strony internetowe.
Jak może pomóc w tym przypadku? Więc, zobaczmy.
Pionowe kolumny wyrównane
Korzystając z Bootstrap na Twitterze mamy .rowtrochę .col-*s. Wszystko, co musimy zrobić, to wyświetlić żądane .row2 jako elastyczne pudełko kontenera , a następnie wyrównać wszystkie jego elementy elastyczne (kolumny) pionowo według align-itemswłaściwości.
PRZYKŁAD TUTAJ (Przeczytaj uważnie komentarze)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Wyjście
Kolorowy obszar wyświetla pole wypełnienia kolumn.
Wyjaśnianie w sprawie align-items: center
8.3 Wyrównanie osi: align-itemswłaściwość
Elementy elastyczne można wyrównywać w osi poprzecznej bieżącej linii pojemnika elastycznego, podobnie jak justify-contentw kierunku prostopadłym, ale w tym samym kierunku. align-itemsustawia domyślne wyrównanie dla wszystkich elementów pojemnika Flex, w tym anonimowych elementów Flex .
align-items: center;
Według wartości środkowej pole marginesu elementu elastycznego jest wyśrodkowane na osi poprzecznej w linii.
Big Alert
Ważna uwaga # 1: Twitter Bootstrap nie określa widthkolumn w bardzo małych urządzeniach, chyba że podasz jedną z .col-xs-#klas kolumnom.
Dlatego w tym konkretnym pokazie użyłem .col-xs-*klas, aby kolumny były poprawnie wyświetlane w trybie mobilnym, ponieważ widthwyraźnie określa kolumnę.
Ale alternatywnie możesz wyłączyć układ Flexbox, po prostu zmieniając display: flex;na display: block;określone rozmiary ekranu. Na przykład:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Lub możesz określić .vertical-align tylko na określonych rozmiarach ekranu, takich jak:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
W tym przypadku pójdę z @KevinNelson „s podejście .
Ważna uwaga # 2: Prefiksy dostawcy pominięto ze względu na zwięzłość. Składnia Flexbox została zmieniona w tym czasie. Nowa pisemna składnia nie będzie działać na starszych wersjach przeglądarek internetowych (ale nie tak starych jak Internet Explorer 9! Flexbox jest obsługiwany w Internet Explorerze 10 i nowszych).
Oznacza to, że display: -webkit-boxw trybie produkcyjnym należy również używać właściwości z prefiksem dostawcy, takich jak itd.
Jeśli klikniesz „Przełącz widok kompilowany” w Demo , zobaczysz prefiksowaną wersję deklaracji CSS (dzięki Autoprefixer ).
Kolumny o pełnej wysokości z wyrównaną w pionie treścią
Jak widać w poprzedniej wersji demonstracyjnej , kolumny (elementy Flex) nie są już tak wysokie jak ich kontener (pole Flex Container, tzn. .rowElement).
Wynika to z używania centerwartości align-itemswłaściwości. Wartość domyślna jest stretchtaka, że elementy mogą wypełnić całą wysokość elementu nadrzędnego.
Aby to naprawić, możesz również dodać display: flex;do kolumn:
PRZYKŁAD TUTAJ (ponownie, pamiętaj o komentarzach)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Wyjście
Kolorowy obszar wyświetla pole wypełnienia kolumn.
Na koniec zauważ, że prezentacje i fragmenty kodu mają na celu dać ci inny pomysł i zapewnić nowoczesne podejście do osiągnięcia celu. Jeśli zamierzasz stosować to podejście w witrynach i aplikacjach z prawdziwego świata, pamiętaj o sekcji „ Big Alert ”.
Przydałoby się to do dalszej lektury, w tym do obsługi przeglądarki, te zasoby:
1. Wyrównaj obraz w pionie w pionie z responsywną wysokością.
2. Lepiej jest użyć dodatkowej klasy, aby nie zmieniać domyślnych ustawień Bootstrap na Twitterze .row.
div, bez tekstu w środku, coś takiego jak ten jsfiddle.net/corinem/Aj9H9, ale w tym przykładzie nie używam bootstrap