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

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

Değerler

Varsayılan değer: nowrap.

Örnek . wrap Değeri

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

html<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>

css#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):

html<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>

css#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:

html<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>

css#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:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#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