How flex-box has made positioning of website elements easier.
Did you know that digging deep into HTML and CSS properties can make you one of the most front-end developers in this Universe? Ooh! Yeah, very true.
Before joining Microverse, I had the HTML and CSS knowledge but I was not comfortable with my front-end development skills since I did not have other basics e.g (positioning of elements with flex-box.
Let's Talk about the flex-box.
After documenting your markup file(HTML file e.g index.html) create a style.css file for styling your web-page with different layouts. Think about the flex-box and ask yourself what flex-box is.
What is flex-box?
Flex-box is a flexible CSS3 new Web layout model that allows elements to align and distribute space within a container. Flex-box doesn’t require any installation. We can move on and talk about the basic concepts of flex-box. When working with flex-box, we have to think about the rows and columns.
Row, where our items will run along the row in the inline direction in the flex container
Column, here our items will run from the top of the page to the bottom in the block directly in the flex container.
Flex Container:
A flex container is an area where flex items are placed. We create a parent div for the flex-items and give it's class a display-flex. This enables items to display in a row.
Display:
Flex-direction
This defines the direction of Flex-items in the Flex-container to layout either in horizontal rows or vertical columns.
row: left to right.
row-reverse: the right to left.
Column: same as row but from top to bottom.
Column-reverse: same as row-reverse but from bottom to top
Flex-wrap:
Here you can allow the Flex-items to fit onto one line as needed with this property
nowrap: Flex-items will be on one line.
Wrap: Flex-items will wrap onto multiple lines from top to bottom
Justify-content:
Here the Flex-items will align along the main axis with extra space.
Flex-start: flex-items are aligned towards the start of the flex-direction.
Flex-end: flex-items are aligned towards the end of flex-direction.
Flex-grow
This enables a flex-item to grow if necessary.
If one of the children has a value of 2, the remaining space as
the others.
Note: here negative numbers are invalid.
You can also follow this link (https://www.w3schools.com/css/css3_flexbox.asp) for more about flexbox.
