Styling: Flex Layout

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

Version:
  • 3.2.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>a</div>
    <div>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>a</div>
    <div>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-sm-flex-1">a</div>
    <div>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>a</div>
    <div>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>a</div>
    <div>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>a</div>
    <div>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-sm-align-self-center">a</div>
    <div>b</div>
  </div>
oj-[size]-justify-content-center
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>a</div>
    <div>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-md-order-1">a</div>
    <div class="oj-md-order-2">b</div>
  </div>
oj-flex-items-pad Place the pad class on a container or its parent to add child padding.
<div class="oj-flex oj-flex-items-pad">
  <div>a</div>
  <div>b</div>
</div>