Hordhac ku saabsan Flexbox

Flexbox waa hab awood leh oo loo adeegsado qaabaynta layout-ka bogagga internetka. Waxay kuu sahlaysaa inaad si fudud u maareyso booska iyo isku xigxiga walxaha ku jira weel.

Flexbox wuxuu ka kooban yahay 'flex container' (weelka flex) iyo 'flex items' (walxaha flex). Weelka flex wuxuu xukumaa sida walxaha flex loo qeybiyo oo loo habeeyo.

Sida loo abuuro Flex Container

Si walax looga dhigo flex container, waxaad u adeegsataa sifa `display: flex;` ama `display: inline-flex;`.

.weelka { display: flex; }

Tusaale HTML:

<div class="weelka"> <div>Walax 1</div> <div>Walax 2</div> <div>Walax 3</div> </div>

Sifaadka muhiimka ah ee Flexbox

• flex-direction: Waxay qeexdaa jiheynta walxaha (row, column, row-reverse, column-reverse).
• justify-content: Waxay xakamaysaa sida walxaha loo qaybiyo marka ay ku jiraan xariiqda (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Waxay xakamaysaa sida walxaha loo barbar dhigo marka ay ku jiraan xariiqda (stretch, flex-start, flex-end, center, baseline).

Tusaale: Jiheynta Walxaha

Si loo jiheeyo walxaha si toosan:

.weelka { display: flex; flex-direction: row; }

Si loo jiheeyo walxaha si fool-ka-fool ah:

.weelka { display: flex; flex-direction: column; }

Tusaale: Qaybinta Walxaha

Si walxaha loo qaybiyo iyadoo boos siman laga tago:

.weelka { display: flex; justify-content: space-around; }

Flexbox waa qalab aad u fiican oo kaa caawin kara inaad abuurto layout-yo dabacsan oo si fiican uga jawaaba cabbirrada shaashadaha kala duwan. Waxaa lagugula talinayaa inaad tijaabiso sifaadka kala duwan si aad u fahanto awoodda ay leedahay.