თვისება flex-flow

თვისება flex-flow არის შემოკლება flex-direction-ისთვის და flex-wrap-ისთვის. ნაგულისხმევი მნიშვნელობა: row nowrap. გამოიყენება მშობელ ელემენტზე flex ბლოკებისთვის.

სინტაქსი

სელექტორი {
	flex-flow: მთავარი_ღერძის_მიმართულება მრავალსტრიქონიანობა;
}

მნიშვნელობების თანმიმდევრობას მნიშვნელობა არ აქვს.

მაგალითი

ამ მაგალითში ბლოკები არ ეტევა მათ კონტეინერში და განლაგდებიან რამდენიმე სტრიქონზე:

<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-flow: row wrap;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

მაგალითი

შევცვალოთ მთავარი ღერძის მიმართულება (column row-ის ნაცვლად):

<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 {
	flex-flow: column wrap;
	justify-content: space-between;
	display: flex;
	height: 200px;
	width: 330px;
	margin: auto;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

იხილეთ აგრეთვე

თვისება flex-direction,
რომელიც ადგენს flex ბლოკების ღერძების მიმართულებას
თვისება justify-content,
რომელიც ადგენს გასწორებას მთავარი ღერძის მიმართ
თვისება align-items,
რომელიც ადგენს გასწორებას განივი ღერძის მიმართ
თვისება flex-wrap,
რომელიც ადგენს flex ბლოკების მრავალსტრიქონიანობას
თვისება order,
რომელიც ადგენს flex ბლოკების თანმიმდევრობას
თვისება align-self,
რომელიც ადგენს ერთი ბლოკის გასწორებას
თვისება flex-basis,
რომელიც ადგენს კონკრეტული flex ბლოკის ზომას
თვისება flex-grow,
რომელიც ადგენს flex ბლოკების "მოხარხულობას"
თვისება flex-shrink,
რომელიც ადგენს flex ბლოკების შეკუმშვადობას
თვისება flex,
შემოკლება flex-grow-ისთვის, flex-shrink-ისთვის და flex-basis-ისთვის