Day18 #100DaysOfCode

Ugwuanyi Chidera
Sep 6, 2018 · 2 min read

Here is the index.html of the file we will be working with.

index.html

Flex-Direction: The ‘flex-direction: row’ property is the default of any flex container. It spans the content vertically to hit the height of the container. It stacks them side by side.

settin flex direction

The ‘flex-direction:column’ instead stacks the contents vertically on top of each other.

flex-direction: column

When defining the flex-direction as row or column, we have two accesses which are the main accesses like justify-content and align-items.

The main access when it is row, is from left to right just like in the first code snippet. If it is column, it goes from top to bottom just as in the second code snippet.

There is also flex-direction: row-reverse or column reverse which are the cross accesses, the access starts in reverse. They are the cross accesses

flex-direction: row-reverse or flex-direction: column-reverse

Clearly, main access runs from left to right or top to bottom while cross access runs from right to left or bottom to top.

Flex-wrap:

Suppose the flex elements have total widths bigger than your screen size, the ‘flex-wrap: wrap’ property comes in to evenly stretch the elements in the screen.

Suppose I give each box a width of 300px which is a total of 300px*10, that is 3000px. The problem is, my screen is not 300px wide.

box width

Here flex tries to share the flex elements evenly on the screen.

Thats where we apply the flex-wrap on the flex container. Notice the extra spaces, we’ll fix that by using

flex wrap

However, there is also the ‘wrap-reverse’ which changes our main access and cross access from right to left and bottom to top respectively.

wrap-reverse

chibueze ukaegbu

LearnFactory Nigeria

At LearnFactory we Train proficient software, Outsource them for development work around the world and build software solutions for clients.

Ugwuanyi Chidera

Written by

LearnFactory Nigeria

At LearnFactory we Train proficient software, Outsource them for development work around the world and build software solutions for clients.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade