Styling: Flex Bar

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01


Version:
  • 8.0.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>