Flex-wrap hassaýy

flex-wrap hassaýy baş ok boýunça köp setirli bloklary ýerleşdirmek üçin ulanylýar. Flex bloklar üçin ata elementine goýulýar. Gysgaldylan hassaýa flex-flow degişlidir.

Sintaksis

cssselektor {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Görnüşleri

Bellenen görnüşi: nowrap.

Mysal . Wrap görnüşi

Häzir bloklar konteýnerlerine syğmaýar we birnäçe hatara düzüler:

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

Результат:

Mysal . Wrap-reverse görnüşi

Indi ýerleşiş tertibi tersine üýtgär (bloklaryň içindäki sanlara serediň):

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

Результат:

Mysal . Nowrap görnüşi

Häzir bloklar bir setirli tertipde ýerleşer (bellenen ýaly). Bu ýagdaýda bloklar üçin berlen width giňişlik görkezijesi, eger bloklaryň atada ýerleşmegine päsgel berýän bolsa, ünsden düşüriler. Bloklaryň atada ýerleşýändigine, ýöne olaryň hakyky giňişliginiň berlen 100px däl-de, kiçidigine üns beriň:

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

Результат:

Mysal . Nowrap görnüşi

Emma, eger bloklar berlen giňişlikde ýerleşýän bolsa - onda width hassaýy ünsden düşürilmez. Bloklaryň hemmesi syğar ýaly azaldyň:

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

Результат:

Şeýle-de serediň