[HTML|JS|CSS] CSS3: Flexbox

Layout w HTML + CSS zawsze był problemem. W ostatnim czasie coraz więcej przeglądarek wspiera nowe rozwiązanie dotyczące layoutów - flexboxy. Problem jest prosty: mamy kontener i chcemy w nim rozmieścić elementy.

<div id="flexbox1">
 <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Korzystając z propercji display ustawionej na flex oraz ustawiając na kontenerze flex-direction na jedną z możliwych opcji, możemy uzyskać następujące efekty:

.flexbox {
    display: flex;
    flex-direction:row;
    border: 1px solid black;
    margin-top: 10px;
    min-height: 15px;
    width: 200px;    
}

Domyślnie kontener ustawi nam się na 100% szerokości. Modyfikować możemy też style w elementach kontenera. Mamy do dyspozycji propercje order oraz flex-grow.

Jeśli chodzi o sam kontener, to pozostałymi ciekawymi opcjami są flex-wrap oraz justify-content.