Egenskaben flex-wrap

Egenskaben flex-wrap angiver flerlinjet placering af blokke langs hovedaksen. Anvendes på forældreelementet for flex blokke. Indgår i sammentrukket egenskab flex-flow.

Syntaks

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

Værdier

Standardværdi: nowrap.

Eksempel . Værdien wrap

Nu passer blokkene ikke i deres container og vil arrangere sig på flere linjer:

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

Результат:

Eksempel . Værdien wrap-reverse

Nu ændres rækkefølgen til omvendt (se tallene inde i blokkene):

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

Результат:

Eksempel . Værdien nowrap

Nu vil blokkene være placeret i enkeltlinjetilstand (som standard). I dette tilfælde vil værdien for bredden width for blokkene blive ignoreret, hvis det forhindrer blokkene i at passe i forælderen. Læg mærke til, at blokkene passede i forælderen, men deres faktiske bredde ikke er 100px, som de er angivet til, men mindre:

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

Результат:

Eksempel . Værdien nowrap

Hvis blokkene derimod passer med den angivne bredde - så vil egenskaben width ikke blive ignoreret. Lad os reducere antallet af blokke så de alle kan passe:

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

Результат:

Se også