Adding the .elr-flex class sets the container's display property to flex. Notice that by default elements inside a flex container don't wrap. Since the items have a minimum width of 300px they break out of their container. We'll fix this later.
<div class="elr-flex"></div>
Adding the .elr-flex-row class sets the container's children to appear along the x-axis. Since the min width was removed they no longer break out of their container but they also don't fill their container. We will address this later.
<div class="elr-flex elr-flex-row"></div>
Adding the .elr-flex-row class sets the container's children to appear along the y-axis. They also don't fill their container. We will address this later.
<div class="elr-flex elr-flex-column"></div>
One way to prevent children from breaking out of their flex box container is with the flex-wrap: wrap; rule. Adding the elr-flex-wrap class causes the elements to go on to another row instead of breaking out of their container.
<div class="elr-flex elr-flex-wrap"></div>
In the above examples we see a little bit about the behavior of flex helper classes but they're not super flexible. This is where the sizing classes can help. These are the style rules that enable flexbox to replace a traditional grid system.
Adding .elr-flex-grow and .elr-flex-shrink allow the boxes to fill up all of the available space. When the window resizes the boxes will shrink along with their parent container.
<div style="min-width: 0;" class="flex-item elr-flex-grow elr-flex-shrink" >Flex Item. Min Width 0px</div>
<div style="min-width: 0;" class="flex-item elr-flex-1" >Flex Item. Min Width 0px</div>
<div style="min-width: 0;" class="flex-item elr-flex-2" >Flex Item. Min Width 0px</div>
<div style="min-width: 0;" class="flex-item elr-flex-1" >Flex Item. Min Width 0px</div>
<div style="min-width: 0;" class="flex-item elr-flex-3" >Flex Item. Min Width 0px</div>
display: flex; flex-direction: row; align-items: baseline;
display: flex; flex-direction: row; align-items: center;
display: flex; flex-direction: row; align-items: flex-start;
display: flex; flex-direction: row; align-items: flex-end;
display: flex; flex-direction: row; justify-content: center;
display: flex; flex-direction: row; justify-content: space-between;
display: flex; flex-direction: row; justify-content: space-around;
display: flex; flex-direction: row; justify-content: flex-start;
display: flex; flex-direction: row; justify-content: flex-end;