ITL utility_classes

Source: _layout.scss, line 115

4.3 Flex

@mixin flex-center @mixin flex-column

.flex: sets display to flex
.flex-column: creates a flex column
.flex-row: creates a flex row
.flex-shrink: makes the ele shrinkable to fit flexparent
.flex-grow: makes the ele consume empty space of flexparent
.flex-start: places the ele at start of flexparent
.flex-end: places the ele at the end of flexparent
.flex-center: places its child at the center

Example

LOGO

Menu

1

2

3

Test text

<div class="flex-row">
  <div class="flex-center w100 bg-red">LOGO</div>
  <div class="flex-grow flex-end  bg-green p4"> Menu </div>
</div>
<div class="flex-row">
  <div class="flex-column w100">
    <div class="bg-blue">1</div><div class="flex-grow bg-green">2</div><div class="bg-blue">3</div>
  </div>
  <div class="flex-grow bg-yellow">
     <h1 class="title h128">Test text</h1>
  </div>
</div>