This article is a task from Chris Bongers on Hashnode Bootcamp II technical writing virtual meetup.

The task is to create an article that would help my past self solve a problem I previously encountered.

I started out my Web Development journey in March 2020, the journey in the beginning wasn't smooth because of some mistakes I made as a newbie, and I still see some newbies make this same mistakes I did. The Major highlight of the mistakes I made were thus:

As a newbie I was going through the learning stages alone. I was learning this whole new concept all alone without the help of a study partner or a Tech community. Whenever I was stuck or couldn't move past a stone of wall, I had no one to reach out to with my coding problems. I never knew there was a website called "stackoverflow" where you can ask questions or even search for your questions and you'll be sure to get an answer to your problem.

The biggest mistake I made when I was starting out was using an outdated edition of a Web development Book to begin my journey. I was new to this phase so I was not so sure on which resources I could use. This pointing back to the issue of not being in a tech community or having people around you who could help out.

Hey Past self, remember when you were having issues in laying out elements on your web page in CSS? When you were using floats instead of modern techniques like Grid or Flexbox? Well I'm here to solve all your layout issues using Flexbox.

Why Flexbox?

Flexbox is a new module in CSS3 that makes it easy to align elements to one another in different directions and orders. The main idea of flexbox is to give the container the ability to expand and to shrink elements to best use all the available space. Flexbox completely changes the way we build one dimensional layouts, it replaces float layouts, using less and more readable and logical codes.

In Flexbox we have two major terminologies which are the Flexbox Container and the Flexbox Items.

Flex Container

This is the element on which we use flexbox, to create a flex container we need to set the display property of that element to flex. It enables a flex context for all its direct children.

.container {
  display: flex;
}

There are properties associated with Flex Containers, which are:

Flex-direction: This specifies in which direction the main axis should go. This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
```
.container {
   flex-direction: row | row-reverse | column | column-reverse;
}
```
Values associated with the Flex direction Property:

row (default): This is the default value for the flex direction property

row-reverse: It inverts the direction of the main axis, moving from the ride side to the left side.

column: same as row but top to bottom

column-reverse: same as row-reverse but bottom to top

Flex Wrap: This simply defines if the flex-items should wrap into a new line if there's not enough space in the flex container or not

.container {
     flex-wrap: nowrap | wrap | wrap-reverse;
}

Values associated with the Flex wrap Property:

nowrap (default): all flex items will be on one line

wrap: flex items will wrap onto multiple lines, from top to bottom.

wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

justify Content: This defines how the flex-items would be alligned along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end;
}

Values associated with the justify content Property:

flex-start (default): items are packed toward the start of the flex-direction.

flex-end: items are packed toward the end of the flex-direction.

start: items are packed toward the start of the writing-mode direction.

end: items are packed toward the end of the writing-mode direction.

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line

space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

align-items: It is similar to justify-content but with a difference that this defines how much the flex-items will be aligned along the cross axis not the main axis.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end ;
}

Values associated with the align-items Property:

stretch (default): stretch to fill the container (still respect min-width/max-width)

flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.

flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

center: items are centered in the cross-axis

baseline: items are aligned such as their baselines align

align-content: This only applies when there is more than one row of flex-items and that case align-content controls how the rows are aligned along the cross axis if there's some empty space left.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Values associated with the align-content Property:

normal (default): items are packed in their default position as if no value was set.

flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.

flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.

center: items centered in the container

space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end

space-around: items evenly distributed with equal space around each line

space-evenly: items are evenly distributed with equal space around them

stretch: lines stretch to take up the remaining space

Flex Items

The direct child elements of a flex container automatically becomes flexible (flex) items. There are certain properties applied on the flex items

align-self: This is very similar to align items but it is only applicable to one individual flex-items.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Order: this defines the order in which one specific flex-item should appear inside the container. This is really helpful to re-order items e.g for smaller screens. By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.item {
  order: 5; /* default is 0 */
}

The initial value of order is 0. if you want to put one of the flex-items at the beginning, all you need to do is put the value of order lower than 0

Flex-grow: This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

.item {
  flex-grow: 3; /* default 0 */
}

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

Flex-shrink: This defines the ability for a flex item to shrink if necessary. Negative numbers are invalid on this property.

.item {
  flex-shrink: 2; /* default 1 */
}

Flex-basis: This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword.

.item {
  flex-basis:  | auto; /* default auto */
}

If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value