Styling: Flex Bar

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

Version:
  • 3.2.0
Class(es) Description Example Usage
.oj-flex-bar
.oj-flex-bar-start
.oj-flex-bar-middle
.oj-flex-bar-end
The bar layout supports a start/end section sized to its content and a middle section that stretches.
<div class="oj-flex-bar">
  <div class="oj-flex-bar-start"><div>start</div></div>
  <div class="oj-flex-middle"><div>middle</div></div>
  <div class="oj-flex-bar-end"><div>end</div></div>
</div>
.oj-flex-bar-center-absolute

To absolutely center the item in the bar use the class oj-flex-bar-center-absolute instead of oj-flex-bar-middle. This uses absolute positioning along with justify-content and align-items to vertially and horizontally center the content in the bar.

Note: as always with absolute positioning the height of the bar will not be affected by content in an absolutely positioned element, so you may need to set a height on the bar.

<div class="oj-flex-bar">
  <div class="oj-flex-bar-start"><div>start</div></div>
  <div class="oj-flex-bar-center-absolute"><div>middle</div></div>
  <div class="oj-flex-bar-end"><div>end</div></div>
</div>