flex-direction | Daywalker

Wartości

row

(default) w wierszu

row-reverse

w odwrotnym wierszu

column

w kolumnie

column-reverse

w odwrtonej kolumnie

Kod HTML


<div class="flexbox-container">
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
</div>

Kod CSS


.flexbox-container {
  background: #fff;
  border: 1px solid #e3e3e3;
  height: 175px;
  display: flex;
}
  .flexbox-item {
    padding: 10px;
  }

Zobrazowanie

row (d)


.flexbox-container { 
  flex-direction: row;
}

row-reverse


.flexbox-container { 
  flex-direction: row-reverse;
}

column


.flexbox-container { 
  flex-direction: column;
}

column-reverse


.flexbox-container { 
  flex-direction: column-reverse;
}

Stylowe kategorie

Container