flexbox

Flexbox

Flexbox is a way to create a better set of fluid elements in modern browsers. The standard flexbox consists of a parent container and any number of child elements.

Use .flex-container as the parent and .flex-item as the child.

Flexbox styles are still being worked on and can be considered "experimental"

1
2
3
  <div class="flex-container">
    <div class="flex-item flex-left f-lg bordered border-xs"> 1 </div>
    <div class="flex-item flex-left f-lg bordered border-xs"> 2 </div>
    <div class="flex-item flex-left f-lg bordered border-xs"> 3 </div>
  </div>

Use .flex-N where N is a number from 0 to 4 to control the relative width of a flex-item.

Flex 1
Flex 2
Flex 3
Flex 4
  <div class="flex-container">
    <div class="flex-item flex-1 p1 bg-gray-lightest">Flex 1</div>
    <div class="flex-item flex-2 p1 bg-gray-light">Flex 2</div>
    <div class="flex-item flex-3 p1 bg-gray-lightest">Flex 3</div>
    <div class="flex-item flex-4 p1 bg-gray-light">Flex 4</div>
  </div>

Flex list

Use .list-flex on lists to create li children as flexible sections.

You can think of flex lists as a way to present list information like in a table, but that isn't necessarily tabular data.

Flexbox styles are still being worked on and can be considered "experimental"

  • List header
  • List item
  • List item
  • List item
  • List item
  <ul class="list-flex">
    <li class="list-header bg-gray-lightest"> List header </li>
    <li class="bg-gray-light"> List item </li>
    <li class="bg-gray-lightest"> List item </li>
    <li class="bg-gray-light"> List item </li>
    <li class="bg-gray-lightest"> List item </li>
  </ul>