თვისება 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-ისთვის