flex-wrap հատկությունը

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-ի համար