Хусусияти 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,
ки серсатрӣ (multi-line) будани flex блокҳоро муқаррар мекунад
хусусияти order,
ки тартиби flex блокҳоро муқаррар мекунад
хусусияти align-self,
ки ҷойгиркунии як блокро муқаррар мекунад
хусусияти flex-basis,
ки андозаи як flex-блоки мушаххасро муқаррар мекунад
хусусияти flex-grow,
ки чи қадар flex блокҳо «ҳаросмандиянд» муқаррар мекунад
хусусияти flex-shrink,
ки фишоришавандагӣ (сжимаемость) flex блокҳоро муқаррар мекунад
хусусияти flex,
ихтисор барои flex-grow, flex-shrink ва flex-basis