Styling: FlexLayout

Oracle® JavaScript Extension Toolkit (JET)
16.0.0
F83703-01

Version:
  • 16.0.0
Flex Layout Style classes
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.
.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

NOTE: In Chrome 84 a new flexbox layout engine was introduced. By default the flex class sets flex-wrap: wrap, but heavy usage of flex-wrap: wrap seems to have performance issues with the new engine. If you run into issues consider using oj-sm-flex-wrap-nowrap where possible.

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

Category: Flex Item Order

Responsive classes to set the order property. In Redwood these classes use the !important rule.
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.

Class template:

.oj-[size-no-sm]-order-[0-5]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size-no-sm]

Value (required) Name Description
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for [0-5]

Value (required) Name Description
0 0 0th place
1 1 1st place
2 2 2nd place
3 3 3rd place
4 4 4th place
5 5 5th place

Example
<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>

Category: Flex Item Align Items

Responsive classes to set the align-items property. In Redwood these classes use the !important rule.

Class template:

.oj-[size](-only)-align-items(-flexalign)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-only)

Value (optional) Name Description
-only only Applied to only specified screen size.

Values for (-flexalign)

Value (optional) Name Description
-flex-start Flex Start Flex items are packed toward the start of the line.
-flex-end Flex End Flex items are packed toward the end of the line.
-center Center Flex items are packed toward the center of the line.
-baseline Baseline All participating flex items on the line are aligned such that their baselines align

Example
<div class="oj-flex oj-sm-align-items-center">
   <div class="oj-flex-item">a</div>
   <div class="oj-flex-item">b</div>
</div>

Category: Flex Item Align Self

Responsive classes to set the align-self property. In Redwood these classes use the !important rule.

Class template:

.oj-[size](-only)-align-self(-flexalignself)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-only)

Value (optional) Name Description
-only only Applied to only specified screen size.

Values for (-flexalignself)

Value (optional) Name Description
-flex-start Flex Start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
-flex-end Flex End The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.
-center Center The flex item’s margin box is centered in the cross axis within the line.

Example
<div class="oj-flex">
   <div class="oj-flex-item oj-sm-align-self-center">a</div>
   <div class="oj-flex-item">b</div>
</div>

Category: Flex Item Flex

Overrides the element's flex property to 0, 1 or 'initial'. 'initial' is one of the common flex values). See note about a known webkit bug.

Class template:

.oj-[size](-only)-flex-[flex]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-only)

Value (optional) Name Description
-only only Applied to only specified screen size.

Values for [flex]

Value (required) Name Description
0 Flex 0 Sizes the item according to the width/height properties, but makes the flex item fully inflexible.
1 Flex 1 Sizes the item based on the width/height properties, but makes them fully flexible
initial initial This is the initial value. Sizes the item based on the width/height properties and will size the flex item based on its contents.

Example
<div class="oj-flex">
   <div class="oj-flex-item  oj-sm-flex-1">a</div>
   <div class="oj-flex-item">b</div>
</div>

Category: Flex Direction

Responsive classes to set the flex-direction property. In Redwood these classes use the !important rule.

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.

Class template:

.oj-[size](-only)-flex-direction-column

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-only)

Value (optional) Name Description
-only only Applied to only specified screen size.

Example
<div class="oj-flex oj-sm-flex-direction-column">
   <div class="oj-flex-item">a</div>
   <div class="oj-flex-item">b</div>
</div>

Category: Flex

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 flex: 0. To work around this you must create a custom class and set the flex-basis to whatever min-width you are using.

Class template:

.oj-[size](-only)-flex-items-[flex]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-only)

Value (optional) Name Description
-only only Applied to only specified screen size.

Values for [flex]

Value (required) Name Description
0 Flex 0 Sizes the item according to the width/height properties, but makes the flex item fully inflexible.
1 Flex 1 Sizes the item based on the width/height properties, but makes them fully flexible
initial initial This is the initial value. Sizes the item based on the width/height properties and will size the flex item based on its contents.

Example
<div class="oj-flex oj-sm-flex-items-1">
   <div class="oj-flex-item">a</div>
   <div class="oj-flex-item">b</div>
</div>

Category: Flex Item Wrap

Responsive classes to set the flex-wrap property.
In Redwood these classes use the !important rule.

Class template:

.oj-[size](-only)-flex-wrap-nowrap

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-only)

Value (optional) Name Description
-only only Applied to only specified screen size.

Example
<div class="oj-flex oj-sm-flex-wrap-nowrap">
   <div class="oj-flex-item">a</div>
   <div class="oj-flex-item">b</div>
</div>

Category: Flex Justify Content

Responsive classes to set the justify-content property.In Redwood these classes use the !important rule.

Class template:

.oj-[size](-only)-justify-content(-flexjustify)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-only)

Value (optional) Name Description
-only only Applied to only specified screen size.

Values for (-flexjustify)

Value (optional) Name Description
-flex-start Flex Start Items are at the start.
-flex-end Flex End Items are at the end.
-center Center Items are centered.
-space-between Space Between Space is distributed between items.
-space-around Space Around Space is distributed around items.

Example
<div class="oj-flex oj-sm-justify-content-center">
   <div class="oj-flex-item">a</div>
   <div class="oj-flex-item">b</div>
</div>