Oracle JET Alta UI and Flex Layout

Hi Guys, In this post I'll share the flex layout and Alta ui basics.
I have created JET application ,for creation of JET Application you can refer my Previous post.
Now in customers.html file create flex container and play with different element.

customers.html file -
<!--
 Copyright (c) 2014, 2018, Oracle and/or its affiliates.
 The Universal Permissive License (UPL), Version 1.0
 -->
<div class="oj-hybrid-padding">
  <h1>Customers Content Area</h1>
  <div class="oj-flex ">

    <div class="oj-Sm-only-direction-column oj-flex-item oj-flex oj-panel oj-margin oj-panel-alt1">
       
      <div class="oj-flex-item oj-panel oj-margin oj-panel-alt2">
      </div>
      <div class="oj-flex-item oj-panel oj-margin oj-panel-alt3">
      </div>

    </div>

      <div class="oj-flex-item oj-panel oj-margin oj-panel-alt3">
      </div>
      <div class="oj-flex-item oj-panel oj-margin oj-panel-alt4">
      </div>
  <div>
</div>

flex container - I have create 4 flex container inside div tag.with different different oj element.

to segregate the container i have used one dive and put 2 flex container inside the div.

Alta UI - Here I have used different alta ui like alta1,alta2,alta3,alta4.

once you'll save the work space will get the changed browser.

Now you can play with different oj element and Alta UI.

Cheers:)