Oracle JET Flex Layouts

Use the Oracle JET oj-flex and oj-flex-item classes to create flexible box layouts that are based on the CSS flexible box layout model.

In the flex layout model, you create flex containers with children that you can lay out in any direction or order. As the available unused space grows or shrinks, the children grow to fill the unused space or shrink to avoid overflowing the parent.

To create a basic flex layout, add the oj-flex class to a container element (HTML div, for example) and then add the oj-flex-item class to each of the container’s children.

The following image shows an example of a default flex layout using the Oracle JET flex box styles. The sample contains two flex containers, each with three children. As the screen size widens, the flex container allocates unused space to each of the children. As the screen size shrinks below the width of one of the flex items, the flex container will wrap the content in that item as needed to no wider than the maximum display width. In this example, this has the effect of causing the F child to wrap to the next row.

The markup for this flex layout is shown below, with the flex layout classes highlighted in bold. The demo-flex-display class sets the color, font weight, height, and border around each flex item in the layout.

<div id="container">
  <div class="demo-flex-display">
    <div class="oj-flex">
      <div class="oj-flex-item">A</div>
      <div class="oj-flex-item">B</div>
      <div class="oj-flex-item">C</div>
    </div>
    
    <div class="oj-flex">
      <div class="oj-flex-item">D</div>
      <div class="oj-flex-item">E</div>
      <div class="oj-flex-item">F - This child has more text to show the effect of unequal content.</div>
    </div>
  </div>
</div>

You can customize the flex layout using styles detailed in Flex Layout Styling and described below.

Modifying the flex Property

The Oracle JET layout classes are based on the CSS Flexible Box Layout Module which defines CSS flex common values for flex item sizing. By default, Oracle JET’s flex layout defaults to the auto CSS flex property which allows a flex item to shrink or grow as needed for responsive layouts. However, the CSS model sets the default flex property to initial , which allows a flex item to shrink but will not allow it to grow.

You can achieve the same effect by adding the oj-sm-flex-items-initial class to the flex container to set the flex property to initial for all child flex items, or add the oj-sm-flex-initial class to an individual flex item to set its property to initial. The following image shows the effect.

The code sample below shows the markup. In this example, padding is also added to the content using the oj-flex-items-pad class on the parent container.

<div id="container">
  <div class="demo-flex-display oj-flex-items-pad">
    <div class="oj-flex oj-sm-flex-items-initial">
      <div class="oj-flex-item">A</div>
      <div class="oj-flex-item">B</div>
      <div class="oj-flex-item">C</div>
    </div>
    
    <div class="oj-flex">
      <div class="oj-flex-item">A</div>
      <div class="oj-sm-flex-initial oj-flex-item">B</div>
      <div class="oj-flex-item">C</div>
    </div>
  </div>
</div>

You can also override the default auto flex property by using the oj-size-flex-items-1 class on the flex container. This class sets the flex property to 1, and all flex items in the flex container with a screen size of size or higher will have the same width, regardless of the items’ content.

To set the flex property to 1 on an individual flex item, add oj-sm-flex-1 to the flex item. The Flex Layouts section in the Oracle JET Cookbook includes the examples used in this section that you can use and modify to observe the flex layout’s responsive behavior.

Wrapping Content

By default, Oracle JET sets the CSS flex-wrap property to wrap, which sets the flex container to multi-line. Child flex items will wrap content to additional lines when the screen width shrinks to less than the width of the flex item’s content. However, the CSS model sets the flex-wrap property to nowrap, which sets the flex container to single-line. When a child item’s content is too wide to fit on the screen, the content will wrap within the child.

You can set the flex-wrap property to nowrap by adding oj-sm-flex-nowrap to the oj-flex container. The following image shows the effect of changing the flex-wrap property to nowrap.

Customizing Flex Layouts

You can customize an Oracle JET flex layout by adding the appropriate style to the flex container or child. The flex layout classes support some of the more commonly-used values for:

  • flex-direction

  • align-items

  • align-self

  • justify-content

  • order

The Oracle JET Cookbook includes examples for customizing your flex layout at: Flex Layouts.