Flexbox

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

Nadszedł czas, aby przyjrzeć się kolejnemu znanemu narzędziu Bootstrap - flexboxowi.

W rzeczywistości, flexbox to nie jest twórczość Bootstrapa, lecz zwykłe CSS. Jednak dzięki Bootstrapowi możemy wygodnie korzystać z flexboxa przy użyciu narzędzi opartych na klasach.

Ale dosyć gadania, teraz wyjaśnijmy to lepiej za pomocą przykładów.

Krok 1 - dodaj nagłówki

Nasz imponujący nagłówek z obrazem wygląda imponująco, ale ponieważ nie zawiera treści, ma niewielkie zastosowanie.

Musimy dodać pewien rodzaj zachęty do działania (Call to action). Najlepiej, aby obejmowała duży nagłówek, podtytuł i przycisk.

Zróbmy to. Wewnątrz div z naszym obrazkiem, dodajmy inny div z nagłówkami oraz przyciskiem wewnątrz.

                                      
                                        <!-- Background image -->
<div class="bg-image vh-100" style="
             margin-top: -58.59px;
             background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">

  <!-- Call to action -->
  <div>
    <h1>Whoah, what a view!</h1>
    <h5>Learning web design is such an amazing thing</h5>
    <a class="btn btn-primary" href="#" role="button">Learn with me</a>
  </div>

</div>
                                      
                                    

Pojawiły się one w górnym lewym rogu ekranu, częściowo zakrywając pasek nawigacyjny. To zdecydowanie nie jest satysfakcjonujące rozwiązanie.

Musimy znaleźć sposób, aby idealnie wyśrodkować je w poziomie i pionie. Bez względu na wielkość ekranu, chcemy, aby nasze Call to action było wyśrodkowane.

To zadanie może być trudne. Na szczęście jednak mamy do dyspozycji flexbox, dzięki któremu poradzimy sobie z nim w mgnieniu oka.

Krok 2 - dodaj kontener

Jednak przed dodaniem flexboxa, musimy umieścić nasze Call to action wewnątrz kontenera.

Jak pamiętasz z poprzednich lekcji, kontenery zapewniają nam podstawowy układ i marginesy dla naszego interfejsu. Dlatego zaktualizuj kod w swoim projekcie w następujący sposób:

                                      
                                        <!-- Background image -->
<div class="bg-image vh-100" style="
             margin-top: -58.59px;
             background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">

  <!-- Container -->
  <div class="container">

    <!-- Call to action -->
    <div>
      <h1>Whoah, what a view!</h1>
      <h5>Learning web design is such an amazing thing</h5>
      <a class="btn btn-primary" href="#" role="button">Learn with me</a>
    </div>

  </div>

</div>
                                      
                                    

Krok 3 - dodaj flexbox

A teraz flexbox wchodzi do akcji.

Po pierwsze, aby włączyć flexbox, musimy dodać klasę d-flex do wybranego elementu ("d" to skrót od "display", więc d-flex = display: flex).

Ponieważ chcemy wyśrodkować nasze Call to action, musimy dodać klasę d-flex do kontenera.

Container jest rodzicem div zawierającego Call to action, więc wszystkie jego elementy potomne będą wyświetlane w trybie flexbox.

                                      
                                        <!-- Container -->
<div class="container d-flex">

  <!-- Call to action -->
  <div>
    <h1>Whoah, what a view!</h1>
    <h5>Learning web design is such an amazing thing</h5>
    <a class="btn btn-primary" href="#" role="button">Learn with me</a>
  </div>

</div>
                                      
                                    

Na razie wszystko idzie dobrze, ale po zapisaniu pliku nic się nie zmienia.

I to dlatego, że włączenie flexboxa to dopiero pierwszy krok. Teraz musimy wybrać jedną z wielu dostępnych opcji, aby zdefiniować, jak dokładnie chcemy wyrównać określone elementy.

Aby wyśrodkować elementy w poziomie, używamy klasy justify-content-center. Aby wyśrodkować je w pionie, używamy klasy align-items-center.

Dodajmy je obok klasy d-flex.

                                      
                                        <!-- Container -->
<div class="container d-flex justify-content-center align-items-center">

  <!-- Call to action -->
  <div>
    <h1>Whoah, what a view!</h1>
    <h5>Learning web design is such an amazing thing</h5>
    <a class="btn btn-primary" href="#" role="button">Learn with me</a>
  </div>

</div>
                                      
                                    

Wydaje się, że zawartość została wyśrodkowana tylko w poziomie, ale pionowo pozostała bez zmian 🤔

Jednak jeśli przyjrzysz się dokładniej, zobaczysz, że to nieprawda - wyśrodkowanie w pionie również zadziałało.

Problemem jest jednak to, że wysokość container na którym używamy flexboxa, jest równa wysokości elementów, które zawiera. W rezultacie nie ma efektu wizualnego wyśrodkowania w pionie.

Krok 4 - ustawienie wysokości

Zróbmy eksperyment - dodajmy klasę bg-danger do container, co nada mu czerwone tło. Dzięki temu będziemy mogli zobaczyć jego rzeczywistą wysokość.

                                      
                                        <!-- Container -->
<div class="container d-flex justify-content-center align-items-center bg-danger">

  <!-- Call to action -->
  <div>
    <h1>Whoah, what a view!</h1>
    <h5>Learning web design is such an amazing thing</h5>
    <a class="btn btn-primary" href="#" role="button">Learn with me</a>
  </div>

</div>
                                      
                                    

Spójrz na czerwony prostokąt - container kończy się dokładnie tam, gdzie kończy się i zaczyna jego zawartość - w tym przypadku elementy Call to action.

Aby rozciągnąć container na całą wysokość naszego nagłówka z obrazem musimy ustawić jego wysokość na 100% dostępnego miejsca.

To bardzo łatwe do zrobienia przy użyciu Bootstrapa. Wystarczy dodać klasę h-100 do container ("h" od height, więc h-100 = height: 100%).

                                      
                                        <!-- Container -->
<div class="container d-flex justify-content-center align-items-center h-100 bg-danger">

  <!-- Call to action -->
  <div>
    <h1>Whoah, what a view!</h1>
    <h5>Learning web design is such an amazing thing</h5>
    <a class="btn btn-primary" href="#" role="button">Learn with me</a>
  </div>

</div>
                                      
                                    

Po zapisaniu pliku i odświeżeniu przeglądarki zobaczysz, że tym razem Call to action jest wyśrodkowane zarówno w poziomie, jak i w pionie.

Możesz usunąć klasę bg-danger. Służyła tylko do pokazania wysokości container, więc nie jest już potrzebna.

Nadal mamy wiele do poprawienia w naszym Call to action (takie jak słaba widoczność), ale zajmiemy się tym w następnej lekcji.

Jeśli chodzi o flexbox - w tej lekcji nauczyliśmy się tylko podstawowych funkcji. Zaawansowane tematy będziemy omawiać wiele razy w przyszłości, ponieważ flexbox jest przydatny praktycznie w każdym projekcie.

Jeśli jednak chcesz trochę pobawić się z flexboxem, zajrzyj do naszego generatora flexbox. To niezwykle przydatne narzędzie, które pozwala na eksperymentowanie z ustawieniami flexbox na żywo i uzyskiwanie wyników w postaci gotowego do użycia kodu. Możesz również dodatkowo przeczytać stronę dokumentacji flexbox, aby zobaczyć wszystkie dostępne opcje.

Kiedy będziesz gotowy, kliknij "dalej" i przejdź do następnej lekcji.