Styling: Flex Bar

Oracle® JavaScript Extension Toolkit (JET)
5.0.0

E90577-01

Version:
  • 5.0.0
Module:
  • jsdoc
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>