Flexbox (Flexible Box Layout) ir CSS izkārtojuma modelis, kas ļauj ērti izvietot elementus rindā vai kolonnā, kontrolēt to izmērus, atstarpes un līdzinājumu. Tas ir ideāls viendimensiju izkārtojumiem.

Flexbox pamati

Lai aktivizētu flexbox, vecākelementam (konteineram) pievieno display: flex:

.konteiners {
display: flex;
}

Visi tiešie bērnelementi automātiski kļūst par flex elementiem un tiek izvietoti rindā.

Virziena noteikšana (flex-direction)

flex-direction: row; /* rindā — no kreisās uz labo (noklusējums) */
flex-direction: row-reverse; /* rindā — no labās uz kreiso */
flex-direction: column; /* kolonnā — no augšas uz leju */
flex-direction: column-reverse; /* kolonnā — no apakšas uz augšu */

Līdzinājums galvenajā asī (justify-content)

justify-content: flex-start; /* sākumā (noklusējums) */
justify-content: flex-end; /* beigās */
justify-content: center; /* centrā */
justify-content: space-between; /* vienmērīgi ar atstarpi starp elementiem */
justify-content: space-around; /* vienmērīgi ar atstarpi ap elementiem */
justify-content: space-evenly; /* pilnīgi vienmērīgas atstarpes */

Līdzinājums šķērsasī (align-items)

align-items: stretch; /* izstiepj visā augstumā (noklusējums) */
align-items: flex-start; /* augšā */
align-items: flex-end; /* apakšā */
align-items: center; /* centrā */
align-items: baseline; /* pēc teksta bāzes līnijas */

Elementa centrēšana

Flexbox ļauj elementu centrēt gan horizontāli, gan vertikāli ar divām rindiņām:

.konteiners {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* visa ekrāna augstums */
}

Aplaušana (flex-wrap)

flex-wrap: nowrap; /* visi vienā rindā (noklusējums) */
flex-wrap: wrap; /* pārlec jaunā rindā, ja nepietiek vietas */

Atstarpes starp elementiem (gap)

.konteiners {
display: flex;
gap: 20px; /* vienmērīga atstarpe starp visiem elementiem */
gap: 20px 10px; /* rindas | kolonnas atstarpe */
}

Bērnelementa īpašības

.elements {
flex-grow: 1; /* aizpilda brīvo vietu */
flex-shrink: 0; /* nesarūk, ja nepietiek vietas */
flex-basis: 200px; /* sākotnējais izmērs */

/* Saīsinātā forma */
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
flex: 0 0 300px; /* fiksēts 300px platums */
}

Praktisks piemērs: navigācija

.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: #2c3e50;
}

.nav-links {
display: flex;
gap: 20px;
list-style: none;
}

Praktisks piemērs: kartīšu izkārtojums

.kartisu-konteiners {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.kartite {
flex: 1 1 300px; /* minimālais platums 300px, aug līdzvērtīgi */
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}