Karatasi za Kubreki zenye Upana Otomatiki katika CSS
Katika somo lililopita, katika karatasi zetu za kubreki ilibidi upana wa vipengele na mapungufu yao jumla yape upana wa mzazi. Hii sio ya kawaida kabisa. Hebu tufanye ili vipengele virekebishe otomatiki kulingana na upana wa mzazi.
Tuchukulie tuna mzazi kama huyu:
.parent {
display: flex;
flex-wrap: wrap;
width: 800px;
margin: 50px auto;
border: 1px solid red;
}
Tuchukulie vipengele vya karatasi hii ya kubreki vimewekwa 4
kwa kila safu:
.child {
box-sizing: border-box;
width: 200px;
height: 100px;
border: 1px solid green;
}
Weka upana wa vitalu vyetu kwa namna ambayo kila
kimoja kinachukua robo ya mzazi. Kwa hili
weka ukubwa wao kuwa 25%:
.child {
box-sizing: border-box;
width: 25%;
height: 100px;
border: 1px solid green;
}
Weka upana wa vitalu kwa asilimia ili katika karatasi ya kubreki kuwe na vitalu vitatu kwa kila safu.
Weka upana wa vitalu kwa asilimia ili katika karatasi ya kubreki kuwe na vitalu viwili kwa kila safu.
Weka upana wa vitalu kwa asilimia ili katika karatasi ya kubreki kuwe na kimoja kwa kila safu.
