flex-wrap Özelliği

flex-wrap özelliği, ana eksen boyunca çok satırlı yerleşimi belirler. Flex blokların ebeveyn öğesine uygulanır. flex-flow kısaltma özelliğinin bir parçasıdır.

Sözdizimi

seçici {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Değerler

Değer	Açıklama
`nowrap`	Tek satır modu - bloklar tek bir satıra dizilir.
`wrap`	Bloklar tek bir satıra sığmazsa birden fazla satıra dizilir.
`wrap-reverse`	`wrap` ile aynıdır, ancak bloklar ters sırada dizilir (önce sonuncu, sonra ilk).

Varsayılan değer: nowrap.

Örnek . wrap Değeri

Şimdi bloklar kendi konteynerına sığmıyor ve birden fazla satıra dizilecek:

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

Örnek . wrap-reverse Değeri

Şimdi ise sıralama tersine dönecek (blokların içindeki numaralara bakın):

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

Örnek . nowrap Değeri

Şimdi bloklar tek satır modunda yerleşecek (varsayılan olarak böyledir). Bu durumda, blokların width genişlik değeri, blokların ebeveyne sığmasına engel oluyorsa göz ardı edilecektir. Blokların ebeveyne sığdığına, ancak gerçek genişliklerinin onlara verilen 100px değil, daha az olduğuna dikkat edin:

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

Örnek . nowrap Değeri

Ancak, bloklar kendilerine verilen genişlikte sığıyorsa, width özelliği göz ardı edilmez. Blok sayısını hepsinin sığacağı şekilde azaltalım:

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

Ayrıca Bakınız

flex blokların eksen yönünü belirleyen flex-direction özelliği
ana eksen boyunca hizalamayı belirleyen justify-content özelliği
çapraz eksen boyunca hizalamayı belirleyen align-items özelliği
flex-direction ve flex-wrap için kısaltma olan flex-flow özelliği
flex blokların sırasını belirleyen order özelliği
tek bir bloğun hizalamasını belirleyen align-self özelliği
belirli bir flex bloğunun boyutunu belirleyen flex-basis özelliği
flex blokların genişleme faktörünü belirleyen flex-grow özelliği
flex blokların küçülme faktörünü belirleyen flex-shrink özelliği
flex-grow, flex-shrink ve flex-basis için kısaltma olan flex özelliği