Podstawy Flexbox : układanie elemntów.

Flexbox to jedna z najlepszych funkcji CSS. Zaprojektowano ją jako jednowymiarowy model tworzenia układu elementów oraz metodę, która oferuje dystrybucję przestrzeni między elementami w interfejsie. Flexbox ułatwia też wyrównanie elementów. Dzięki Flexbox łatwiej jest projektować elastyczne i responsywne layouty bez korzystania z float, czy position.

Definiowanie kontenera

Aby zacząć korzystać z Flexbox, należy zedefiniować element, który stanie się kontenerem, który opakowuje wszystkie elementy potomne w następujący sposób:

<div class=”container”>

  <div>1</div> 

 <div>2</div>

  <div>3</div>

</div>

.container {

  display: flex;

  background-color: red;

}

.container div{

  background-color: #f1f1f1;

  margin: 10px;

  padding: 20px;

  font-size: 30px;

}

oto rezultat:

Czerwony kontener, który zawiera 3 elastyczne elementy div

Właściwość align-items

Właściwość align-items służy wyrównaniu obiektów flex. To prawie to samo, co justify-content, ale pracujemy pionowo, a nie poziomo.

Oto przykład, który wyśrodkowuje elementy potomne w pionie wewnątrz kontenera:

.container {

  display: flex;

  height: 300px;

  align-items: center;

  background-color: red;

}

.container > div {

  background-color: #f1f1f1;

  width: 100px;

  margin: 10px;

  text-align: center;

  line-height: 75px;

  font-size: 30px;

}

Rezultat:

Elementy wyrównane w pionie

Właściwość align-items posiada te same wartości, co justify-content. Jedyną różnicą jest to, że pracujemy pionowo, a nie poziomo