xmeter/css/src/_o-Flex.less

A default stylesheet with a set of tools that make designing with vertical rhythm easy.

/*################################*\
    xmeter  |  _o-Flex.less
\*################################*/


// The Flex Object
//
// The Flex Object is a container of flexible items arranged in one dimension.
//
// The axis, called the <b>main-axis</b>, is horizontal by default, but you can
// change the orientation to vertical using <code>flex-direction</code>.
//
// Also by default, the items along the main-axis do not wrap to the next track (row or column),
// but you can use <code>flex-wrap</code> 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 <b>main size</b> of <code>auto</code>, which defers to its
// <code>width</code> (or <code>height</code>) property. If that property is not explicitly set
// (or is explicitly set to <code>auto</code>), 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 <em>between</em> the items.
// You can override this with <code>justify-content</code>.
//
// See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for details.
// <header><dl>
//   <dt>author</dt>  <dd>Chris Harvey</dd>
//   <dt>updated</dt> <dd><time>2017-06-09</time></dd>
// </dl></header>
//
// 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>
//
// Weight: 2
//
// Styleguide Objects.Flex
.o-Flex {
  display: flex;
  line-height: inherit; // override lh-z on text-level elements
  justify-content: space-between;
}

.o-Flex__Item {
  flex: auto;
  line-height: inherit; // override lh-z on text-level elements
}