Flexbox Basics:
Understanding Flatsome

Learning Objectives:

Today’s training objective is to make sure everyone has a basic knowledge of how Flexbox works and see how Flatsome is applying Flexbox to their core positioning elements: rows & columns. By knowing how Flatsome works at the core, you’ll be able to better diagnose and troubleshoot problems when they arise, as well as be able to manipulate Flatsome to do things out of it’s basic functionality. 

Today there is only one challenge broken up into steps. We are going to be building some cards from scratch in the same structure Flatsome does it. The code you will be adding css to is at the bottom of this page. This is going to involve all the basics of flexbox as well as some nested flexbox. Let’s go through it step by step…

Resource:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

Understanding the HTML

To fully understand how Flatsome functions, you’re going to need to know how the html is setup first. In the graphic and code below, I’ve drawn out the containers of how Flatsome has structured the layout above. 

Goal: Take a few minutes to make sure you really understand this structure. Go through the code below the graphic line by line and make sure you understand what is related to what. 

Layout Structure:

<row class="ls-row ls-align-equal">
    <div class="ls-col">
        <div class="ls-col-inner">
            * COLUMN CONTENT *
        </div>
    </div>
    
    <div class="ls-col">
        <div class="ls-col-inner">
            * COLUMN CONTENT *
        </div>
    </div>

    <div class="ls-col">
        <div class="ls-col-inner">
            * COLUMN CONTENT *
        </div>
    </div>

</div>

Column Content + Inner Structure:

<div class="ls-col">
    <div class="ls-col-inner">
 
        <div class="ls-icon-box">
            <div class="icon-box-img"style="width: 60px">
                <div class="icon">
                    <div class="icon-inner">
                        <img src=""/>
                    </div>
                </div>
            </div>

            <div class="icon-box-text last-reset">
                <h3 class="mb-0">Lemonade</h3>
            </div>

         </div>

         <div class="is-divider divider clearfix"style="max-width:100%;height:1px;"></div>
 
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

         <div class="ls-stack">

             <img src=""/>
             <img src=""/>
             <img src=""/>
             <img src=""/>
             <img src=""/>

         </div>
     </div>
</div>

Layout Structure

At the bottom of this page you will find the result of the plain html structure with no Flatsome influence other than on the buttons and images. We’re going to add flexbox to this structure to form the layout.

Main Layout:

• Step #1: Add flex to your row.
• Step #2: It is common to add both flex direction and flex wrap when you add flex to anything. Add both these to your row. (We do want wrapping abilities in case we have more than 3 items in our row). 
• Step #3: Our row now has the ability to put elements next to each other, but the columns are sizing themselves however they feel like. Tell your columns how big they should be. Flatsome uses both max-width and flex-basis to do this, so use those two properties. They should be the same value.
• Step #4: Our row is very wide. Let’s put a max-width of 1150px on it and center it. 

Fixing up the column layout: 

• Step #1: Add this box-shadow to your column inner (only the direct child of column 4) so you can see the true size of you columns: box-shadow: 0 30px 40px 0 rgba(0, 0, 0, .2); 
• Step #2: Add this padding to your col-inner: 0 15px 30px. This is going to be for all columns.
• Step #3: Let’s use flexbox to make our columns the same height. If you flex a child of a flexed element, that child will try to grow to the size of the parent. Add flex to the column to make it grow to the size of the parent. 
• Step #4 – quick detour: Temporarily disable your code from Step #3. If you wanted to instead vertically center these cards you could use the property “align-items” for that. Flex has two properties for how items are aligned: justify and align. Align works in the opposite direction of the flow (so for our flex-direction row, it works in the vertical column direction). Justify works in the same direction as flex-direction. Test out the align property with center and flex-end. When you’ve tested these out, set it back to step #3. Also note that the properties align-content and justify-content exist as well. These are used when your flex box wraps to multiple lines. They tell how to align the content as a whole rather than each individual item.
• Step #5: Let’s add some padding to our nested row. I’ve used 30px except at the bottom where I’ve used 15px. Flatsome puts this on the column inner.
• Step #6: With padding on our nested column, we now have some double upped padding. Flatsome compensates for that by putting a -15px of margin on the left and right sides of it’s nested rows. Apply this margin to only your nested row. 

Inner Flexbox

At this point your main structure for your cards should be complete. Now we need to add some flex to our inner elements.

• Step #1: Put the icon and title next to each other using flex. The padding will go on the text element. Make sure to center the text vertically with the icon.
• Step #2: Now let’s flex the icons. Use flex to evenly distribute the 5 icons across the card. 
• Step #3: The final step is going to be getting our stack of icons to align at the bottom of the cards. We could try doing this with absolute positioning, but this might lead to potential problems with overlapping or the icons leaving the container area. A better solution will be to use flex.

  There’s an interesting property with margins where if you add a margin: auto in combination with a flex box, the margin will fill all the extra space that it can.

  What this means is that if our parent container is the full row height and using flex, we can add margin-top: auto to our stack and the margin will fill any extra space, pushing out stack to the bottom of the container. The challenge here is getting the parent container to the full height of the outer row.

  Go through each of your containers and find the containers that need their heights adjusted (there were 2 in my final code). Add flex to the correct container and margin-top: auto to the stack.