flex-wrap ගුණය

flex-wrap ගුණය ප්‍රධාන අක්ෂය දිගේ බහු-පේළි කොටු සැකසුම නියම කරයි. flex කොටු සඳහා මව් අංගයට යොදනු ලැබේ. flex-flow සංක්ෂිප්ත ගුණයේ කොටසකි.

වාක්‍ය රචනය

තේරුම්ගන්නා {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

අගයන්

අගය	විස්තරය
`nowrap`	ඒක-පේළි ප්‍රකාරය - කොටු එක් පේළියකට සකස් වේ.
`wrap`	කොටු එක් පේළියකට නොගැලපේ නම්, බහු පේළිවලට සකස් වේ.
`wrap-reverse`	`wrap` ට සමාන වේ, නමුත් කොටු වෙනස් අනුපිළිවෙලකට සකස් වේ (පළමුව අවසානය, පසුව පළමුවැන්න).

පෙරනිමි අගය: nowrap.

උදාහරණය . wrap අගය

දැන් කොටු ඒවායේ බහාලුමට නොගැලපෙන අතර බහු පේළිවලට සකස් වනු ඇත:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

උදාහරණය . wrap-reverse අගය

දැන් අනුපිළිවෙල ප්‍රතිවිරුද්ධ වනු ඇත (කොටු ඇතුළත ඇති ඉලක්කම් දෙස බලන්න):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

උදාහරණය . nowrap අගය

දැන් කොටු ඒක-පේළි ප්‍රකාරයෙන් සකස් වනු ඇත (පෙරනිමිය ලෙස). මෙම අවස්ථාවේ දී width පළල අගය කොටු සඳහා නොසලකා හරිනු ලැබේ, එය කොටු මව් අංගයට ගැලපීමට බාධා කරන්නේ නම්. කොටු මව් අංගයට ගැලපුවද, ඒවායේ සත්‍ය පළල 100px නොවන බව සලකන්න, ඒවාට ලබා දී ඇති පරිදි, නමුත් අඩුය:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

උදාහරණය . nowrap අගය

කෙසේ වෙතත්, කොටු ලබා දී ඇති පළලෙන් ගැලපේ නම් - width ගුණය නොසලකා හරිනු නොලැබේ. කොටු සියල්ල ගැලපෙන පරිදි කොටු ගණන අඩු කරමු:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

මෙයද බලන්න

flex-direction ගුණය,
යම් flex කොටුවල අක්ෂ දිශාව නියම කරයි
justify-content ගුණය,
යම් ප්‍රධාන අක්ෂය දිගේ පෙළගැස්ම නියම කරයි
align-items ගුණය,
යම් හරස් අක්ෂය දිගේ පෙළගැස්ම නියම කරයි
flex-flow ගුණය,
flex-direction සහ flex-wrap සඳහා සංක්ෂිප්තය
order ගුණය,
යම් flex කොටුවල අනුපිළිවෙල නියම කරයි
align-self ගුණය,
යම් එක් කොටුවක පෙළගැස්ම නියම කරයි
flex-basis ගුණය,
යම් නිශ්චිත flex කොටුවක ප්‍රමාණය නියම කරයි
flex-grow ගුණය,
යම් flex කොටුවල ලොභිකභාවය නියම කරයි
flex-shrink ගුණය,
යම් flex කොටුවල සම්පීඩනය වීමේ හැකියාව නියම කරයි
flex ගුණය,
flex-grow, flex-shrink සහ flex-basis සඳහා සංක්ෂිප්තය