Flexbox

Responsive flexbox utilities allow you to quickly achieve a wide variety of layouts without needing a lot of custom CSS. Combine these with Phenotypes spacing utilities for great justice.

Usage

See the demos above for implementation details. All utilities are responsive, so you can append breakpoint tokens (-sm, -md, -lg, or -xl) to target the corresponding screen sizes and up.

For example, .flex-column.flex-row-sm would render a vertical layout on xs screens and a horizontal layout on sm screens and larger.

Etc.

Note: this feature is enabled by default and adds 359 lines of CSS (approx 10kb) to the compiled CSS. You can toggle it off by setting $enable-flex-utilities: false before importing Phenotypes.

Adapted from Bootstrap 4.

Related:

<div>
    <h3>These display utilities are needed for flexbox</h3>
    <p>Apply these display utilities to an element to create a flexbox container. This transforms direct children elements into flex items. Apply additional flex properties shown below to further customize.</p>
    <div>
        <p><code class="text-color-hint">. d-flex </code>
        </p>
        <div class="d-flex p3" style="background:#eee;height:;width:;">I’m a flexbox container!</div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-inline-flex </code>
        </p>
        <div class="d-inline-flex p3" style="background:#eee;height:;width:;">I’m an inline flexbox container!</div>
    </div>
    <h3 class="mt7">Direction utilities</h3>
    <div>
        <p><code class="text-color-hint">. d-flex . flex-column . flex-row-sm </code>
        </p>
        <div class="d-flex flex-column flex-row-sm p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 1</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 2</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 3</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-column-reverse . flex-row-reverse-sm </code>
        </p>
        <div class="d-flex flex-column-reverse flex-row-reverse-sm p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 1</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 2</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 3</div>
        </div>
    </div>
    <h3 class="mt7">Justify utilities</h3>
    <div>
        <p><code class="text-color-hint">. d-flex . justify-content-start </code>
        </p>
        <div class="d-flex justify-content-start p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . justify-content-end </code>
        </p>
        <div class="d-flex justify-content-end p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . justify-content-center </code>
        </p>
        <div class="d-flex justify-content-center p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . justify-content-between </code>
        </p>
        <div class="d-flex justify-content-between p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . justify-content-around </code>
        </p>
        <div class="d-flex justify-content-around p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <h3 class="mt7">Align utilities</h3>
    <div>
        <p><code class="text-color-hint">. d-flex . align-items-start </code>
        </p>
        <div class="d-flex align-items-start " style="background:#eee;height:119px;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . align-items-end </code>
        </p>
        <div class="d-flex align-items-end " style="background:#eee;height:119px;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . align-items-center </code>
        </p>
        <div class="d-flex align-items-center " style="background:#eee;height:119px;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . align-items-baseline </code>
        </p>
        <div class="d-flex align-items-baseline " style="background:#eee;height:119px;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . align-items-stretch </code>
        </p>
        <div class="d-flex align-items-stretch " style="background:#eee;height:119px;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <h3 class="mt7">Align self utilities</h3>
    <div>
        <p><code class="text-color-hint">. d-flex </code>
        </p>
        <div class="d-flex " style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
            <div class="p3 m1 align-self-start" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.align-self-start</code>
            </div>
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex </code>
        </p>
        <div class="d-flex " style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
            <div class="p3 m1 align-self-end" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.align-self-end</code>
            </div>
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex </code>
        </p>
        <div class="d-flex " style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
            <div class="p3 m1 align-self-center" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.align-self-center</code>
            </div>
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex </code>
        </p>
        <div class="d-flex " style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
            <div class="p3 m1 align-self-baseline" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.align-self-baseline</code>
            </div>
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex </code>
        </p>
        <div class="d-flex " style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
            <div class="p3 m1 align-self-stretch" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.align-self-stretch</code>
            </div>
            <div class="p3 m1 " style="background:#dbdbdb;height:119px;width:;">Flex item</div>
        </div>
    </div>
    <h3 class="mt7">Combining utilities with auto margins</h3>
    <div>
        <p><code class="text-color-hint">. d-flex . justify-content-end </code>
        </p>
        <div class="d-flex justify-content-end p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 mr-auto" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.mr-auto</code>
            </div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . justify-content-start </code>
        </p>
        <div class="d-flex justify-content-start p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 ml-auto" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.ml-auto</code>
            </div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-column . align-items-start </code>
        </p>
        <div class="d-flex flex-column align-items-start " style="background:#eee;height:200px;width:;">
            <div class="p3 m1 mb-auto" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.mb-auto</code>
            </div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-column . align-items-end </code>
        </p>
        <div class="d-flex flex-column align-items-end " style="background:#eee;height:200px;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 mt-auto" style="background:#4d4d4d;height:;width:;color:#fff;"><code>.mt-auto</code>
            </div>
        </div>
    </div>
    <h3 class="mt7">Wrapping utilities</h3>
    <div>
        <p><code class="text-color-hint">. d-flex . flex-nowrap </code>
        </p>
        <div class="d-flex flex-nowrap " style="background:#eee;height:;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 1</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 2</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 3</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 4</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 5</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-wrap </code>
        </p>
        <div class="d-flex flex-wrap " style="background:#eee;height:;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 1</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 2</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 3</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 4</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 5</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-wrap-reverse </code>
        </p>
        <div class="d-flex flex-wrap-reverse " style="background:#eee;height:;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 1</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 2</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 3</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 4</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 5</div>
        </div>
    </div>
    <h3 class="mt7">Order utilities</h3>
    <div>
        <p><code class="text-color-hint">. d-flex </code>
        </p>
        <div class="d-flex p2" style="background:#eee;height:;width:;">
            <div class="p3 m1 order-last" style="background:#4d4d4d;height:;width:;color:#fff;">Flex item 1 (<code>.order-last</code>)</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item 2</div>
            <div class="p3 m1 order-first" style="background:#4d4d4d;height:;width:;color:#fff;">Flex item 3 (<code>.order-first</code>)</div>
        </div>
    </div>
    <h3 class="mt7">Align content utilities</h3>
    <div>
        <p><code class="text-color-hint">. d-flex . flex-wrap . align-content-start </code>
        </p>
        <div class="d-flex flex-wrap align-content-start " style="background:#eee;height:200px;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-wrap . align-content-end </code>
        </p>
        <div class="d-flex flex-wrap align-content-end " style="background:#eee;height:200px;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-wrap . align-content-center </code>
        </p>
        <div class="d-flex flex-wrap align-content-center " style="background:#eee;height:200px;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-wrap . align-content-between </code>
        </p>
        <div class="d-flex flex-wrap align-content-between " style="background:#eee;height:200px;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-wrap . align-content-around </code>
        </p>
        <div class="d-flex flex-wrap align-content-around " style="background:#eee;height:200px;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex . flex-wrap . align-content-stretch </code>
        </p>
        <div class="d-flex flex-wrap align-content-stretch " style="background:#eee;height:200px;width:500px;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
        </div>
    </div>
    <h3 class="mt7">Grow and shrink</h3>
    <div>
        <p><code class="text-color-hint">. d-inline-flex </code>
        </p>
        <div class="d-inline-flex " style="background:#eee;height:;width:;">
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">In this example, this box has so much text in it that it would cause the other box to break lines on the dash. But that box cannot shrink b/c it has the<code>.flex-none</code> class.</div>
            <div class="p3 m1 flex-none" style="background:#dbdbdb;height:;width:;"><code>.flex-none</code>
            </div>
        </div>
    </div>
    <hr class="my5" />
    <div>
        <p><code class="text-color-hint">. d-flex </code>
        </p>
        <div class="d-flex " style="background:#eee;height:;width:;">
            <div class="p3 m1 flex-1" style="background:#dbdbdb;height:;width:;"><code>.flex-1</code>
            </div>
            <div class="p3 m1 " style="background:#dbdbdb;height:;width:;">Flex item</div>
            <div class="p3 m1 flex-1" style="background:#dbdbdb;height:;width:;"><code>.flex-1</code>
            </div>
        </div>
    </div>
</div>
import * as React from 'react';

const boxStyle1 = { background: '#eee' };
const boxStyle2 = { background: '#dbdbdb' };

function Label(props) {
  const className = props.className || 'text-color-hint';
  return (
    <p>
      <code className={className}>{props.children}</code>
    </p>
  );
}

function Separator() {
  return <hr className="my5" />;
}

function Demo(props) {
  const extraClassNames = props.extraClassNames || '';
  const allClassNames = `${props.classNames} ${extraClassNames}`;
  const style = Object.assign({}, boxStyle1, {
    height: props.height || '',
    width: props.width || '',
  });

  return (
    <div>
      <Label>
        {props.classNames.split(' ').map(className => `. ${className} `)}
      </Label>
      <div className={allClassNames} style={style}>
        {props.children}
      </div>
    </div>
  );
}

function InnerBox(props) {
  const text = props.children || 'Flex item';
  const classNames = `p3 m1 ${props.className || ''}`;
  const highlightStyles = {
    background: '#4d4d4d',
    color: '#fff',
  };
  let style = Object.assign({}, boxStyle2, {
    height: props.height || '',
    width: props.width || '',
  });
  if (props.highlight) {
    style = Object.assign(style, highlightStyles);
  }
  return (
    <div className={classNames} style={style}>
      {text}
    </div>
  );
}

function FlexboxUtilities() {
  return (
    <div>
      <h3>These display utilities are needed for flexbox</h3>
      <p>
        Apply these display utilities to an element to create a flexbox
        container. This transforms direct children elements into flex items.
        Apply additional flex properties shown below to further customize.
      </p>
      <Demo classNames="d-flex" extraClassNames="p3">
        I’m a flexbox container!
      </Demo>
      <Separator />
      <Demo classNames="d-inline-flex" extraClassNames="p3">
        I’m an inline flexbox container!
      </Demo>

      <h3 className="mt7">Direction utilities</h3>
      <Demo classNames="d-flex flex-column flex-row-sm" extraClassNames="p2">
        <InnerBox>Flex item 1</InnerBox>
        <InnerBox>Flex item 2</InnerBox>
        <InnerBox>Flex item 3</InnerBox>
      </Demo>
      <Separator />
      <Demo
        classNames="d-flex flex-column-reverse flex-row-reverse-sm"
        extraClassNames="p2"
      >
        <InnerBox>Flex item 1</InnerBox>
        <InnerBox>Flex item 2</InnerBox>
        <InnerBox>Flex item 3</InnerBox>
      </Demo>

      <h3 className="mt7">Justify utilities</h3>
      <Demo classNames="d-flex justify-content-start" extraClassNames="p2">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex justify-content-end" extraClassNames="p2">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex justify-content-center" extraClassNames="p2">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex justify-content-between" extraClassNames="p2">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex justify-content-around" extraClassNames="p2">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>

      <h3 className="mt7">Align utilities</h3>
      <Demo classNames="d-flex align-items-start" height="119px">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex align-items-end" height="119px">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex align-items-center" height="119px">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex align-items-baseline" height="119px">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex align-items-stretch" height="119px">
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>

      <h3 className="mt7">Align self utilities</h3>
      <Demo classNames="d-flex">
        <InnerBox height="119px" />
        <InnerBox highlight="true" className="align-self-start">
          <code>.align-self-start</code>
        </InnerBox>
        <InnerBox height="119px" />
      </Demo>
      <Separator />
      <Demo classNames="d-flex">
        <InnerBox height="119px" />
        <InnerBox highlight="true" className="align-self-end">
          <code>.align-self-end</code>
        </InnerBox>
        <InnerBox height="119px" />
      </Demo>
      <Separator />
      <Demo classNames="d-flex">
        <InnerBox height="119px" />
        <InnerBox highlight="true" className="align-self-center">
          <code>.align-self-center</code>
        </InnerBox>
        <InnerBox height="119px" />
      </Demo>
      <Separator />
      <Demo classNames="d-flex">
        <InnerBox height="119px" />
        <InnerBox highlight="true" className="align-self-baseline">
          <code>.align-self-baseline</code>
        </InnerBox>
        <InnerBox height="119px" />
      </Demo>
      <Separator />
      <Demo classNames="d-flex">
        <InnerBox height="119px" />
        <InnerBox highlight="true" className="align-self-stretch">
          <code>.align-self-stretch</code>
        </InnerBox>
        <InnerBox height="119px" />
      </Demo>

      <h3 className="mt7">Combining utilities with auto margins</h3>
      <Demo classNames="d-flex justify-content-end" extraClassNames="p2">
        <InnerBox highlight="true" className="mr-auto">
          <code>.mr-auto</code>
        </InnerBox>
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex justify-content-start" extraClassNames="p2">
        <InnerBox />
        <InnerBox />
        <InnerBox highlight="true" className="ml-auto">
          <code>.ml-auto</code>
        </InnerBox>
      </Demo>
      <Separator />
      <Demo classNames="d-flex flex-column align-items-start" height="200px">
        <InnerBox highlight="true" className="mb-auto">
          <code>.mb-auto</code>
        </InnerBox>
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo classNames="d-flex flex-column align-items-end" height="200px">
        <InnerBox />
        <InnerBox />
        <InnerBox highlight="true" className="mt-auto">
          <code>.mt-auto</code>
        </InnerBox>
      </Demo>

      <h3 className="mt7">Wrapping utilities</h3>
      <Demo classNames="d-flex flex-nowrap" width="500px">
        <InnerBox>Flex item 1</InnerBox>
        <InnerBox>Flex item 2</InnerBox>
        <InnerBox>Flex item 3</InnerBox>
        <InnerBox>Flex item 4</InnerBox>
        <InnerBox>Flex item 5</InnerBox>
      </Demo>
      <Separator />
      <Demo classNames="d-flex flex-wrap" width="500px">
        <InnerBox>Flex item 1</InnerBox>
        <InnerBox>Flex item 2</InnerBox>
        <InnerBox>Flex item 3</InnerBox>
        <InnerBox>Flex item 4</InnerBox>
        <InnerBox>Flex item 5</InnerBox>
      </Demo>
      <Separator />
      <Demo classNames="d-flex flex-wrap-reverse" width="500px">
        <InnerBox>Flex item 1</InnerBox>
        <InnerBox>Flex item 2</InnerBox>
        <InnerBox>Flex item 3</InnerBox>
        <InnerBox>Flex item 4</InnerBox>
        <InnerBox>Flex item 5</InnerBox>
      </Demo>

      <h3 className="mt7">Order utilities</h3>
      <Demo classNames="d-flex" extraClassNames="p2">
        <InnerBox highlight="true" className="order-last">
          Flex item 1 (<code>.order-last</code>)
        </InnerBox>
        <InnerBox>Flex item 2</InnerBox>
        <InnerBox highlight="true" className="order-first">
          Flex item 3 (<code>.order-first</code>)
        </InnerBox>
      </Demo>

      <h3 className="mt7">Align content utilities</h3>
      <Demo
        classNames="d-flex flex-wrap align-content-start"
        width="500px"
        height="200px"
      >
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo
        classNames="d-flex flex-wrap align-content-end"
        width="500px"
        height="200px"
      >
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo
        classNames="d-flex flex-wrap align-content-center"
        width="500px"
        height="200px"
      >
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo
        classNames="d-flex flex-wrap align-content-between"
        width="500px"
        height="200px"
      >
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo
        classNames="d-flex flex-wrap align-content-around"
        width="500px"
        height="200px"
      >
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>
      <Separator />
      <Demo
        classNames="d-flex flex-wrap align-content-stretch"
        width="500px"
        height="200px"
      >
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
        <InnerBox />
      </Demo>

      <h3 className="mt7">Grow and shrink</h3>
      <Demo classNames="d-inline-flex">
        <InnerBox>
          In this example, this box has so much text in it that it would cause
          the other box to break lines on the dash. But that box cannot shrink
          b/c it has the
          <code>.flex-none</code> class.
        </InnerBox>
        <InnerBox className="flex-none">
          <code>.flex-none</code>
        </InnerBox>
      </Demo>
      <Separator />
      <Demo classNames="d-flex">
        <InnerBox className="flex-1">
          <code>.flex-1</code>
        </InnerBox>
        <InnerBox />
        <InnerBox className="flex-1">
          <code>.flex-1</code>
        </InnerBox>
      </Demo>
    </div>
  );
}

export default FlexboxUtilities;
/* No context defined for this component. */
  • Content:
    // ------------------------------
    // Responsive flexbox utilities
    // ------------------------------
    //
    // Based on Bootstrap 4
    // https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_flex.scss
    //
    // scss-lint:disable ImportantRule
    // scss-lint:disable SpaceBeforeBrace
    
    @if $enable-flex-utilities {
      @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
          $suffix: breakpoint-suffix($breakpoint, $grid-breakpoints);
    
          .order-first#{$suffix} { order: -1; }
          .order-last#{$suffix}  { order: 1; }
          .order-0#{$suffix}     { order: 0; }
    
          .flex-row#{$suffix}            { flex-direction: row !important; }
          .flex-column#{$suffix}         { flex-direction: column !important; }
          .flex-row-reverse#{$suffix}    { flex-direction: row-reverse !important; }
          .flex-column-reverse#{$suffix} { flex-direction: column-reverse !important; }
    
          .flex-wrap#{$suffix}         { flex-wrap: wrap !important; }
          .flex-nowrap#{$suffix}       { flex-wrap: nowrap !important; }
          .flex-wrap-reverse#{$suffix} { flex-wrap: wrap-reverse !important; }
    
          .flex-none#{$suffix} { flex: none !important; }
          .flex-1#{$suffix}    { flex: 1 !important; }
    
          .justify-content-start#{$suffix}   { justify-content: flex-start !important; }
          .justify-content-end#{$suffix}     { justify-content: flex-end !important; }
          .justify-content-center#{$suffix}  { justify-content: center !important; }
          .justify-content-between#{$suffix} { justify-content: space-between !important; }
          .justify-content-around#{$suffix}  { justify-content: space-around !important; }
    
          .align-items-start#{$suffix}    { align-items: flex-start !important; }
          .align-items-end#{$suffix}      { align-items: flex-end !important; }
          .align-items-center#{$suffix}   { align-items: center !important; }
          .align-items-baseline#{$suffix} { align-items: baseline !important; }
          .align-items-stretch#{$suffix}  { align-items: stretch !important; }
    
          .align-content-start#{$suffix}   { align-content: flex-start !important; }
          .align-content-end#{$suffix}     { align-content: flex-end !important; }
          .align-content-center#{$suffix}  { align-content: center !important; }
          .align-content-between#{$suffix} { align-content: space-between !important; }
          .align-content-around#{$suffix}  { align-content: space-around !important; }
          .align-content-stretch#{$suffix} { align-content: stretch !important; }
    
          .align-self-auto#{$suffix}     { align-self: auto !important; }
          .align-self-start#{$suffix}    { align-self: flex-start !important; }
          .align-self-end#{$suffix}      { align-self: flex-end !important; }
          .align-self-center#{$suffix}   { align-self: center !important; }
          .align-self-baseline#{$suffix} { align-self: baseline !important; }
          .align-self-stretch#{$suffix}  { align-self: stretch !important; }
        }
      }
    }
    
  • URL: /components/raw/flexbox/_flexbox.scss
  • Filesystem Path: library/utilities/flexbox/_flexbox.scss
  • Size: 3 KB