HTML-Prototype der OTH-Regensburg

Flex line

Toggle example guides Toggle HTML markup

<insert-markup>3.1-</insert-markup>

Eins

Zwei

Drei

normal
analog zu Start
<insert-markup>3.1-0</insert-markup>

Eins

Zwei

Drei

start
Elemente linksbündig
<insert-markup>3.1-1</insert-markup>

Eins

Zwei

Drei

between
Elemente mit gleichem Abstand zueinander
<insert-markup>3.1-2</insert-markup>

Eins

Zwei

Drei

center
Elemente zentriert
<insert-markup>3.1-3</insert-markup>

Eins

Zwei

Drei

around
Elemente mit gleichem Abstand herum
<insert-markup>3.1-4</insert-markup>

Eins

Zwei

Drei

end
Elemente rechtsbündig
<insert-markup>3.1-5</insert-markup>

Eins

Zwei

Drei

row-reverse
Elemente in umgekehrter Reihenfolge
<insert-markup>3.1-6</insert-markup>

Eins

Zwei

Drei

Markup: templates/output/05-objects/flex-line.html 

<div class="o-flex-line o-flex-line--[modifier class]">
  <div>
    <p class="mini">Eins</p>
  </div>
  <div>
    <p class="mini">Zwei</p>
  </div>
  <div>
    <p class="mini">Drei</p>
  </div>
</div>
Source: assets/sass/05-objects/_objects.flex-line.scss, line 5