Eienskap flex-direction

Die eienskap flex-direction stel die rigting van die hoof- en dwars-as vas of, met ander woorde, plaas elemente in 'n ry of in 'n kolom.

Word toegepas op die ouerelement vir flex blokke. Maak deel uit van die verkorte eienskap flex-flow.

Sintaksis

cssselektor {
  flex-direction: row | row-reverse | column | column-reverse;
}

Waardes

Verstekwaarde: row.

Voorbeeld

Elemente is in 'n ry geplaas, by verstek teen die linkerkant vas, hul nommering het die gewone volgorde - van links na regs:

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

css#parent {
  flex-direction: row;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Voorbeeld . Waarde row-reverse

Elemente is in 'n ry geplaas, by verstek teen die regterkant vas, hul nommering het die omgekeerde volgorde - van regs na links:

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

css#parent {
  flex-direction: row-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Voorbeeld . Waarde column

Elemente is in 'n kolom geplaas, by verstek teen die bokant vas, hul nommering het die gewone volgorde - van bo na onder:

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

css#parent {
  flex-direction: column;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Voorbeeld . Waarde column-reverse

Elemente is in 'n kolom geplaas, by verstek teen die onderkant vas, hul nommering het die omgekeerde volgorde - van onder na bo:

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

css#parent {
  flex-direction: column-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Sien ook