CSS Flexbox ni nini?
CSS Flexbox (Flexible Box Layout) ni muundo wa mpangilio wa moja-dimensional kwa ajili ya kusambaza nafasi na kupanga vipengele katika safu au safu wima. Chombo cha flex kinafafanuliwa kwa display: flex, na watoto wake wa moja kwa moja wanakuwa vipengele vya flex. Mali muhimu za chombo: flex-direction (safu au safu wima), flex-wrap (mstari mmoja dhidi ya mistari mingi), justify-content (upangaji wa mhimili mkuu), align-items (upangaji wa mhimili wa msalaba kwa kila mstari), na align-content (upangaji wa mhimili wa msalaba wa mistari mingi). Mali muhimu za kipengele: flex-grow (kipengele kinakuaje), flex-shrink (kinavyopungua), flex-basis (ukubwa wa awali), na align-self (hubatilisha align-items ya chombo kwa kipengele mahususi). Flexbox ni bora kwa upau wa urambazaji, safu za kadi, mipangilio iliyowekwa katikati, na mpangilio wowote wa moja-dimensional.
Jinsi ya Kutumia Kizalishi cha CSS Flexbox
-
Rekebisha mali za chombo (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) ukitumia menyu za kuanguka na uwanja wa ingizo.
-
Bonyeza kipengele chochote katika hakiki ili kukichagua (kinageuka rangi ya machungwa).
-
Weka flex-grow, flex-shrink, flex-basis, na align-self ya kipengele kilichochaguliwa katika jopo la vipengele.
-
Bonyeza '+ Ongeza Kipengele' ili kuongeza vipengele zaidi; bonyeza 'Ondoa' ili kufuta kipengele kilichochaguliwa.
-
Badilisha kati ya vichupo vya CSS na HTML ili kuona msimbo uliotokeza, kisha bonyeza Nakili.
-
Bonyeza 'Weka Upya Yote' ili kuanza upya na mpangilio wa kawaida wa vipengele 3.