Flexing some CSS muscles!
One thing I wish I knew better throughout my bootcamp experience was CSS. I had minimal knowledge of HTML and CSS, but not enough to really style elements the way I wanted. Unfortunately the program didn’t cover either in depth so, post-graduation, I decided it would be one of the first things I continue learning to expand my knowledge. I found a great app called Mimo that provided quick, easy lessons on CSS in a learning format similar to Duolingo and it worked great for me.
One of the early lessons they taught was using flexbox and I immediately knew I wanted to give it a try. The basic principle behind it is to create a flex container parent element that holds different flex items. Then you can tell the box how to display these elements according to how many rows/columns you want. Currently, I am working on an app to track progress in a training program for a race (like a marathon). I wanted to display a box for each day that showed the expected miles to complete for that day as well as your actual miles completed. This is the app I will be using to discuss my implementation of flexbox.
First I created a <div> container with the class name “day-calendar” to hold the items. Then I applied the following CSS to that class.
.day-calendar {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly safe;
align-items: flex-start;
border: 1px solid black;
position: relative;
}This sets the container display to flex, creating the flexbox. Flex-flow is a simple way of combining flex-direction and flex-wrap, so in this case I set the direction to row (left to right) and used wrap for elements to go to the next line if there wasn’t enough space. I used justify-content to space-everything evenly throughout the flexbox as it grows and shrinks and set align-items to flex-start so they begin on the left side. Finally, I set the position to relative so the width of the children would be relative to this container instead of the body.
Next I wrote the CSS for the items in the flexbox which I assigned a class name of “day-calendar-item”. I set the margin to 0, created a border for each day and centered the text for formatting. The important line here is ‘flex: 1 1 14%’.
.day-calendar-item {
text-align: center;
margin: 0px;
border: 1px solid black;
flex: 1 1 14%;
}This is shorthand to combine flex-grow, flex-shrink and flex-basis. Grow has a default value of 0 and Shrink a default of 1 and they determine whether the items can grow/shrink based on the container size. So on different devices they can expand or shrink individual items to fit the container. The final argument is flex-basis which gives the size each item should be. In this case I set it to 14% (keep in mind this is relative to my container width) so it will fit 7 items per row as long as there is space in the container and if not, it will wrap to the next row.
In my example, I set all items to the same flex-grow and flex-shrink to keep them all the same size. However, you can set them for individual items so some shrink/grow more or less than others, giving you a lot of flexibility with the display. Also, if the goal was to keep the boxes a fixed size, then I would change the 15% flex-basis value to a fixed amount like 190px. As the screen shrinks it won’t try to squeeze in 7 days, it will just wrap to the next row if it can’t fit them.
This got me very excited to continue learning more about grids and flex boxes and how I can incorporate them into future applications! Also, the completion bar above the calendar was done using CSS grid, making it super easy to fill in the bar as more miles are completed! Definitely checkout grid displays too.
