Flexing your Flex skills

Getting started in CSS can feel extremely daunting with all of the options in colors and shapes and animations and events and, and, and....

Before you can get to all that cute stuff, it can be really helpful to at the most basic level get the shapes on the page that you're looking to create.

Flexbot is here to save your brain from all the math that can come with many of the templating options when building a new page. Introduced as part of CSS3 in 2017 this great Display option for getting started and comfortable with how pages are read in CSS.

There are three pieces of the Flexbot tool that make getting started extremely simple:

Flex Container: This is the parent container. Attributes you assign to this will change how the elements within this element are displayed.

Flex Item: The child element. Attributes assigned here will affect how the item displays within the rules of the container.

Flex Direction: This is a container attribute to set flow of the items. The two most common and helpful for getting started are Row and Column.

Starting with an empty page, let's block out the highest "items" on the page "container". At this stage I've got a mock of how I would like the site to look in the end in the example here.

Most web page directions at their highest level will be "column". Even here with all of the different elements, you can see that in it's most basic form, the parent elements are stacked on top of each other vertically. "Most Popular" is stacked on "All Products"

So immediately we know in CSS

.page {
display:flex;
flex-direction:column;
height: 100vh
width:100%
}

You'll still need to add sizing. As this is the full page and I don't want sideway scroll so I've added those. vh referring to viewport height.

Now that we have the container, let's start building the items. Using the example:

.mostPopular {
min-height:400px
flex-grow:0
flex-shrink:1
}
.allProducts {
max-height:1000px
flex-grow:0
flex-shrink:2
}

We can set the sizes but flex items will try to grow into a space so sizing is critical at this stage. The attributes I want to call out specifically are flex-grow and flex-shrink.
Setting to zero says you don't want that element to grow/shrink in the direction related to the parent, and the higher the number affects the priority of the element to grow/shrink. In the example, I don't want the elements to grow at all, but if they need to shrink they can, but I want .appProducts to shrink first before .mostPopular starts shrinking vertically.

You're all set with this first step and now you can move onto each of those elements as the containers, and the child elements as the items.

For each element you're looking to get on the page, ask yourself 3 questions:

1. What element should be the most top and the most left in the container.
2. Who are the siblings?
3. Should those siblings be in a column or a row?

I recommend starting from the highest level first but you can it can also be really helpful, when you are working with many small children, to think about their grouping as the basis and work your way up.

Happy Flexing!