CSS & Exploring Flexbox – Celine Pivaral

This week’s most challenging topic was CSS, specifically learning how to apply CSS styles to my HTML document. A particular hurdle emerged when I was working on my tribute assignment. I needed to fill the background color of a container and have my header text displayed in the middle. Initially, I had the misconception that I needed to create a rectangular shape in CSS and position it behind my header, but after looking back at my previous notes, I realized I was headed in the wrong direction. I realized that the header was a block-level element, which occupies the container across the entire page. With this revelation, I immediately knew that I had to add a background color property to my CSS styling. This resolved my issue, and I was left feeling astonished because of how much I over-complicated the assignment.

Upon furthering my front-end web development skills, I came across an unfamiliar topic: Flexbox. I chose to further expand on this topic because I discovered that creating a layout with Flexbox makes the process of creating a website simpler. The layouts created with Flexblox are flexible and intuitive.

How do I get started?

First, create a container in an HTML document, like a div, and use CSS to give it a display property of flex. The flex container (parent) can now control how the flex items (child) are positioned within that container.

After you have given the display a property of flex, the content on the page will appear inline. You are now ready to start modifying the flex container.

What are the most common Flexbox properties, and what do they do?

Flex-direction: Flex-direction is set to row by default. The row property runs from left to right on the main axis. This explains why content is displayed horizontally after it is given the display property of flex. We can also use the column property to move content vertically along the cross-axis. The following commands can be used with flex-direction: row-reverse and column-reverse.

Justify-content: Justify-content controls how items are displayed along the main axis. The following commands can be used with justify-content: flex-start, flex-end, center, space-between, and space-around.

Align-items: Align-items controls how items are displayed along the cross-axis. The following commands can be used with align-items: flex-start, flex-end, center, stretch, and baseline.

Align-self: Align-self gives you the ability to change the alignment of one item by overriding the align-items property.

Flex-wrap: Flex items will try to fit on one line by default. Use the flex-wrap property to avoid this.

There are many more properties and rules to explore with Flexbox, but these are the main properties that I found useful. If you are interested in Flexbox or want to further understand how it works, I have compiled a list of resources that are free for anyone to view.

Understand Flexbox using these resources: