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