A flex-wrap tulajdonság

A flex-wrap tulajdonság a többsoros elrendezést határozza meg a főtengely mentén. A flex elemek szülő elemére vonatkozik. Része a flex-flow rövidített tulajdonságnak.

Szintaxis

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

Értékek

Alapértelmezett érték: nowrap.

Példa . wrap érték

Most az elemek nem férnek el a tárolójukban és több sorba fognak rendeződni:

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

Результат:

Példa . wrap-reverse érték

És most a sorrend fordított lesz (nezd meg a számokat az elemeken belül):

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

Результат:

Példa . nowrap érték

Most az elemek egysoros módban fognak elhelyezkedni (így van alapértelmezetten). Ebben az esetben az elemek width szélességi értéke figyelmen kívül lesz hagyva, ha az megakadályozza, hogy az elemek a szülőbe férjenek. Figyeld meg, hogy az elemek elfértek a szülőben, de a valódi szélességük nem 100px, ahogy meg van adva, hanem kisebb:

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

Результат:

Példa . nowrap érték

Azonban, ha az elemek a megadott szélesség mellett is elférnek - akkor a width tulajdonság nem lesz figyelmen kívül hagyva. Csökkentsük az elemek számát úgy, hogy mind beférjenek:

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

Результат:

Lásd még