Xmeter Style Guide

3.2 #Objects.Flex The Flex Object

Toggle example guides Toggle HTML markup

The Flex Object is a container of flexible items arranged in one dimension.

The axis, called the main-axis, is horizontal by default, but you can change the orientation to vertical using flex-direction.

Also by default, the items along the main-axis do not wrap to the next track (row or column), but you can use flex-wrap to override this as well. If wrapping is turned on, the point where the wrap occurs is not controlled. This is by design. For two-dimensional control, see the Grid Object.

Each flex item has a main size of auto, which defers to its width (or height) property. If that property is not explicitly set (or is explicitly set to auto), then the item’s main size will set automatically based its contents.

The flex items will grow or shrink together to fit into the allotted space. By default, the extra space (if any) will be distributed between the items. You can override this with justify-content.

See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for details.

author
Chris Harvey
updated
Example
  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
  • Sabre-FWT
  • HDR
  • Mitas Energy
  • Power Consulting Associates, LLC
  • Power Line Systems, Inc.
  • Quanta Services
  • ReliaPOLE Inspection Services
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/o-Flex.css"/-->
<ul class="o-List o-Flex">
  <li class="o-List__Item o-Flex__Item">Burns &amp; McDonnell Engineering</li>
  <li class="o-List__Item o-Flex__Item">DIS-TRAN Steel, LLC</li>
  <li class="o-List__Item o-Flex__Item">EDM International</li>
  <li class="o-List__Item o-Flex__Item">Electrical Consultants, Inc.</li>
  <li class="o-List__Item o-Flex__Item">Fabrimet Inc.</li>
  <li class="o-List__Item o-Flex__Item">Falcon Steel Company</li>
  <li class="o-List__Item o-Flex__Item">Sabre-FWT</li>
  <li class="o-List__Item o-Flex__Item">HDR</li>
  <li class="o-List__Item o-Flex__Item">Mitas Energy</li>
  <li class="o-List__Item o-Flex__Item">Power Consulting Associates, LLC</li>
  <li class="o-List__Item o-Flex__Item">Power Line Systems, Inc.</li>
  <li class="o-List__Item o-Flex__Item">Quanta Services</li>
  <li class="o-List__Item o-Flex__Item">ReliaPOLE Inspection Services</li>
</ul>
Source: _o-Flex.less, line 7