CSS-ում ավտոլայնությամբ բլոկներով սալիկապատում

Նախորդ դասում մեր սալիկապատումը հանգեցնում էր նրան, որ տարրերի լայնությունը և նրանց բացատների գումարը պետք է տան ծնողի լայնությանը: Սա մի քիչ ոչ ունիվերսալ է: Եկեք անենք, որ տարրերը ավտոմատ կերպով հարմարվեն ծնողի լայնությանը:

Ենթադրենք ունենք այսպիսի ծնող.

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Ենթադրենք այս սալիկապատման տարրերը դասավորված են մեկ տողում 4 բլոկով.

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

Սահմանենք մեր բլոկների լայնությունն այնպես, որ յուրաքանչյուրը նրանցից զբաղեցնի ծնողի քառորդ մասը: Դրա համար դնենք նրանց չափը 25%-ով.

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Սահմանեք բլոկների լայնությունը տոկոսներով այնպես, որ սալիկապատման մեջ մեկ տողում դառնա երեք բլոկ:

Սահմանեք բլոկների լայնությունը տոկոսներով այնպես, որ սալիկապատման մեջ մեկ տողում դառնա երկու բլոկ:

Սահմանեք բլոկների լայնությունը տոկոսներով այնպես, որ սալիկապատման մեջ մեկ տողում դառնա մեկ բլոկ: