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-ի համառոտագրություն