In this article, we will learn a very important topic of CSS is flexbox. Which helps us to make our website responsive. let's start...............
What is Flex Box?
Flexbox is a one-dimensional layout method for laying out items in rows or column. CSS Flexbox is a better way to align items into a container.The Flexbox model allows us to layout the content of our website. Not only that, it helps us create the structures needed for creating responsive websites for multiple devices
Flex box = Flexible+Box
Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:
flex-start: Items align to the left side of the container.flex-end: Items align to the right side of the container.center: Items align at the center of the container.space-between: Items display with equal spacing between them.space-around: Items display with equal spacing around them.
For example, justify-content: flex-end; will move the frog to the right.
Now use align-items to help the frogs get to the bottom of the pond. This CSS property aligns items vertically and accepts the following values:
flex-start: Items align to the top of the container.flex-end: Items align to the bottom of the container.center: Items align at the vertical center of the container.baseline: Items display at the baseline of the container.stretch: Items are stretched to fit the container
The frogs need to get in the same order as their lilypads using flex-direction. This CSS property defines the direction items are placed in the container, and accepts the following values:
row: Items are placed the same as the text direction.row-reverse: Items are placed opposite to the text direction.column: Items are placed top to bottom.column-reverse: Items are placed bottom to top.
Notice that when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.
Notice that when you set the direction to a reversed row or column, start and end are also reversed.
Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).
Use the order property to reorder the frogs according to their lilypads
Oh no! The frogs are all squeezed onto a single row of lilypads. Spread them out using the flex-wrap property, which accepts the following values:
nowrap: Every item is fit to a single line.wrap: Items wrap around to additional lines.wrap-reverse: Items wrap around to additional lines in reverse
The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.
For example, you can use flex-flow: row wrap to set rows and wrap them.
The frogs are spread all over the pond, but the lilypads are bunched at the top. You can use align-content to set how multiple lines are spaced apart from each other. This property takes the following values:
flex-start: Lines are packed at the top of the container.flex-end: Lines are packed at the bottom of the container.center: Lines are packed at the vertical center of the container.space-between: Lines display with equal spacing between them.space-around: Lines display with equal spacing around them.stretch: Lines are stretched to fit the container.
This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect