Układ elastyczny - CSS
Marginesy automatyczne
Jak elastycznie dopasować margines elementu, tak aby wypełnił wolną przestrzeń?
selektor { margin-top: auto }
selektor { margin-right: auto }
selektor { margin-bottom: auto }
selektor { margin-left: auto }
selektor { margin: auto }Ustawiając wybrany margines na wartość automatyczną sprawimy, że wypełni on wolną przestrzeń pozostałą w kontenerze. Dzięki temu w bardzo prosty sposób możemy ustawić kilka bloków w jednej linii - część przy lewej krawędzi, a niektóre przy prawej.
Przykład {display: flex, margin-left: auto}
Pytania i odpowiedzi
Co oznacza "margin: auto"?
W kontekście flexbox, "margin: auto" oznacza, że element zostanie wyśrodkowany wzdłuż osi głównej (głównego kierunku) kontenera. Działa to poprzez równomierne rozłożenie dostępnego miejsca po obu stronach elementu, co skutkuje wyśrodkowaniem.
Jak ustawić elementy obok siebie CSS?
Aby ustawić elementy obok siebie w kontekście flexbox CSS, można to osiągnąć ustawiając "margin-right: auto" na pierwszym elemencie lub "margin-left: auto" na drugim elemencie. To spowoduje, że pierwszy element przylegnie do lewej krawędzi kontenera, a drugi do prawej krawędzi, a dostępna przestrzeń zostanie równomiernie rozłożona między nimi.