Egenskapen flex-direction

Egenskapen flex-direction sätter riktningen för huvudaxeln och tväraxeln eller, med andra ord, placerar element i rad eller kolumn.

Tillämpas på föräldraelementet för flexboxar. Ingår i genvägsegenskapen flex-flow.

Syntax

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

Värden

Standardvärde: row.

Exempel

Elementen är placerade i rad, som standard tryckta mot vänster kant, deras numrering har normal ordning - från vänster till höger:

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

Результат:

Exempel . Värdet row-reverse

Elementen är placerade i rad, som standard tryckta mot höger kant, deras numrering har omvänd ordning - från höger till vänster:

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

Результат:

Exempel . Värdet column

Elementen är placerade i kolumn, som standard tryckta mot toppen, deras numrering har normal ordning - från topp till botten:

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

Результат:

Exempel . Värdet column-reverse

Elementen är placerade i kolumn, som standard tryckta mot botten, deras numrering har omvänd ordning - från botten till topp:

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

Результат:

Se även