Īpašība flex-direction

Īpašība flex-direction nosaka galvenās un šķērsass virzienu vai, citiem vārdiem sakot, izvieto elementus rindā vai kolonnā.

Attiecas uz vecākelementu flex blokiem. Ietilpst īpašībā-saīsinājumā flex-flow.

Sintakse

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

Vērtības

Noklusējuma vērtība: row.

Piemērs

Elementi ir izvietoti rindā, pēc noklusējuma piespiesti pie kreisās malas, to numerācijai ir parasta secība - no kreisās uz labo pusi:

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

Результат:

Piemērs . Vērtība row-reverse

Elementi ir izvietoti rindā, pēc noklusējuma piespiesti pie labās malas, to numerācijai ir apgriezta secība - no labās uz kreiso pusi:

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

Результат:

Piemērs . Vērtība column

Elementi ir izvietoti kolonnā, pēc noklusējuma piespiesti pie augšas, to numerācijai ir parasta secība - no augšas uz leju:

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

Результат:

Piemērs . Vērtība column-reverse

Elementi ir izvietoti kolonnā, pēc noklusējuma piespiesti pie apakšas, to numerācijai ir apgriezta secība - no apakšas uz augšu:

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

Результат:

Skatiet arī