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;
}

Мисал

Негизги огунун багытын өзгөртөбүз (row ордуна column):

<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 үчүн кыскартуу