Styling: Flex Layout

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01


Version:
  • 8.0.0

There are various flexbox bugs on different browsers, not all of which JET can work around, see the flexbugs github repo for useful information on known bugs and workarounds.

See Responsive Prefixes for information on what [size] means

Class(es) Description Example Usage
oj-flex The class oj-flex can be used for a flexbox based layout. The oj-flex class is different from a default flexbox in the following ways
  • the flex-wrap property is set to 'wrap'
  • the flex property on the children has been set to auto, one of the common flex values.
  • padding is added to the children
 
  <div class="oj-flex">
    <div class="oj-flex-item">a</div>
    <div class="oj-flex-item">b</div>
  </div>
oj-[size]-flex-items-0
oj-[size]-flex-items-1
oj-[size]-flex-items-initial

oj-[size]-only-flex-items-0
oj-[size]-only-flex-items-1
oj-[size]-only-flex-items-initial
 Overrides the children's flex property to 1 or 'initial'. 'initial' is one of the common flex values).

NOTE: There is a known webkit bug when using flex: 1 or 0. To work around this you must create a custom class and set the flex-basis to whatever min-width you are using.

 
  <div class="oj-flex oj-sm-flex-items-1">
    <div class="oj-flex-item">a</div>
    <div class="oj-flex-item">b</div>
  </div>
oj-[size]-flex-0
oj-[size]-flex-1
oj-[size]-flex-initial

oj-[size]-only-flex-0
oj-[size]-only-flex-1
oj-[size]-only-flex-initial 		overrides the element's flex property to 0, 1 or 'initial'. 'initial' is one of the common flex values). See note in row above re known webkit bug. 
  <div class="oj-flex">
    <div class="oj-flex-item oj-sm-flex-1">a</div>
    <div class="oj-flex-item">b</div>
  </div>
oj-[size]-flex-direction-column
oj-[size]-only-flex-direction-column 		Responsive classes to set the flex-direction property.

NOTE: IE 11 can have issues when setting the flex-direction property to column in combination with other properties. For example if the children's flex property is also set to 1 the layout completely breaks on IE. This is a browser bug you will need to work around, so make sure to test on IE 11 if it's a browser you need to support. 

  <div class="oj-flex oj-sm-flex-direction-column">
    <div class="oj-flex-item">a</div>
    <div class="oj-flex-item">b</div>
  </div>
oj-[size]-flex-wrap-nowrap
oj-[size]-only-flex-wrap-nowrap 		Responsive classes to set the flex-wrap property. 
  <div class="oj-flex oj-sm-flex-wrap-nowrap">
    <div class="oj-flex-item">a</div>
    <div class="oj-flex-item">b</div>
  </div>
oj-[size]-align-items-center
oj-[size]-align-items-flex-start
oj-[size]-align-items-flex-end
oj-[size]-align-items-baseline

oj-[size]-only-align-items-center
oj-[size]-only-align-items-flex-start
oj-[size]-only-align-items-flex-end
oj-[size]-only-align-items-baseline
 Responsive classes to set the align-items property. 
  <div class="oj-flex oj-sm-align-items-center">
    <div class="oj-flex-item">a</div>
    <div class="oj-flex-item">b</div>
  </div>
oj-[size]-align-self-center
oj-[size]-align-self-flex-start
oj-[size]-align-self-flex-end

oj-[size]-only-align-self-center
oj-[size]-only-align-self-flex-start
oj-[size]-only-align-self-flex-end
 Responsive classes to set the align-self property. 
  <div class="oj-flex">
    <div class="oj-flex-item oj-sm-align-self-center">a</div>
    <div class="oj-flex-item">b</div>
  </div>
oj-[size]-justify-content-center
oj-[size]-justify-content-flex-start
oj-[size]-justify-content-flex-end
oj-[size]-justify-content-space-around
oj-[size]-justify-content-space-between

oj-[size]-only-justify-content-center
oj-[size]-only-justify-content-flex-end
oj-[size]-only-justify-content-space-around
oj-[size]-only-justify-content-space-between
 Responsive classes to set the justify-content property. 
  <div class="oj-flex oj-sm-justify-content-center">
    <div class="oj-flex-item">a</div>
    <div class="oj-flex-item">b</div>
  </div>
oj-[size]-order-[0-5] Responsive classes to set the order property. Because pages are expected to be designed mobile-first, there are no oj-sm-order classes, rather the dom order reflects the design for small screens and then the order classes are used on larger screens. 
  <div class="oj-flex">
    <div class="oj-flex-item oj-md-order-1">a</div>
    <div class="oj-flex-item oj-md-order-2">b</div>
  </div>
oj-flex-items-pad Deprecated This class is deprecated.
The class has limited applicability as it only controls a specific value of horizontal padding.
The recommendation is to place oj-sm-margin-2x-horizontal on the children/descendants where the padding was ending up.

Place the pad class on a container or its parent to add child padding. 
<div class="oj-flex oj-flex-items-pad">
  <div class="oj-flex-item">a</div>
  <div class="oj-flex-item">b</div>
</div>