CSS-ի ֆլեքսներով սալիկապատման խնդիրները

Սալիկապատման առաջին խնդիրը ընդհանուր առմամբ անմիջապես ակնհայտ է - շատ անհարմար է, որ ծնողին պետք է պարզորոշ նշի բարձրությունը: Չէ՞ որ մեզ մոտ միանգամայն հնարավոր է, որ բլոկների քանակը կփոխվի դինամիկորեն, և դրանց քանակը կլինի երբեմն ավելի քիչ, երբեմն ավելի շատ, քան 9-ը:

Իսկ երկրորդ խնդիրը կառաջանա, եթե բլոկների քանակը այնպիսին է, որ վերջին շարքում կլինի անբավարար քանակությամբ բլոկներ: Այս դեպքում վերջին շարքը կերևա սարսափելի.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ստացվում է, որ նույնիսկ հորիզոնական ուղղությամբ space-between արժեքը մեր դեպքում վատ է աշխատում:

Ամփոփենք. եթե ձեր ժառանգների քանակը միշտ հաստատուն է և նորմալ տեղավորվում է ծնողի մեջ, ապա space-between-ի վրա հիմնված սալիկապատումը բավականին հարմար բան է: Հակառակ դեպքում պետք է այլ բան մտածել:

Տրված են 12 էլեմենտներ: Դրանցից ստեղծեք սալիկապատում՝ շարքում 4 էլեմենտով, յուրաքանչյուր էլեմենտի լայնությունը 100px և նրանց միջև հեռավորությունը 20px:

Տրված են 12 էլեմենտներ: Դրանցից ստեղծեք սալիկապատում՝ շարքում 3 էլեմենտով, յուրաքանչյուր էլեմենտի լայնությունը 150px և նրանց միջև հեռավորությունը 10px: