Hey Learner, do you want to learn Frontend Development???🤩🤩
YYYYYYYEEEEEEESSSSSSSSS???!!!!💯
Then CSS is one of the tools in which developers like you spend a lot of time to learn and implement 🤕🤒
So, to get started with Flexbox, first thing you need to know is What is a Flexbox?
Well, CSS Flexbox is a one-dimensional model or structure that not only helps you to arrange your items or elements along the cross-axis (top-bottom) and main-axis (left-right) but also provides you a lot of flexibility to control the spacing between the elements😲😲
Hope, this image gives you a basic idea about the different components of a Flexbox.
We have a parent Flex Container, within which all our children Flex-items are arranged.
The properties of a CSS Flexbox Container are:
- display
- flex-direction
- flex-flow
- flex-wrap
- justify-content
- align-items
- align-content
Display
Display Property is used to create a Flex Container. The value of the display property is either set to flex or inline-flex. The following code snippet will create a Flex-container with six Flex-items embedded within it.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<link rel="stylesheet" href="style.css">
<title>CSS Flexbox</title>
</head>
<body>
<div class="container">
<div class="flex-items fruit-1">Apple</div>
<div class="flex-items fruit-2">Orange</div>
<div class="flex-items fruit-3">Banana</div>
<div class="flex-items fruit-4">Strawberry</div>
<div class="flex-items fruit-5">Cherry</div>
<div class="flex-items fruit-6">Guava</div>
</div>
</body>
</html>
style.css
.container {
border: 5px solid black;
display: flex;
}
.flex-items {
color: #800000;
font-size: 2rem;
text-align: center;
}
.fruit-1 {
background-color: #ff1a1a;
}
.fruit-2 {
background-color: #ff9933;
}
.fruit-3 {
background-color: #ffff00;
}
.fruit-4 {
background-color: #ffb3b3;
}
.fruit-5 {
background-color: #e60000;
}
.fruit-6 {
background-color: #66ff66;
}
Note that, when we set the display value to flex, the items are left-aligned by default, as a result of which, we have some white spaces at the end.
Let's set the display value to inline-flex and see what happens !!!🤔
.container {
border: 5px solid black;
display: inline-flex;
}
We can get rid of the extra spaces. The container only takes up that amount of space required to accommodate its children (flex-items)🤘🎉
Flex-direction
Flex-direction property controls how the Flex-items will be placed inside the Flex-container.
The possible values of flex-direction property are:
row: Arranges the items from left-right (default case)
row-reverse: Arranges the items from right-left
column: Arranges the items from top-bottom
column-reverse: Arranges the items from bottom-top
Lets apply each of these properties and see them in action!!
row
.container {
border: 5px solid black;
display: flex;
flex-direction: row;
}
row-reverse
.container {
border: 5px solid black;
display: flex;
flex-direction: row-reverse;
column
.container {
border: 5px solid black;
display: flex;
flex-direction: column;
}
column-reverse
.container {
border: 5px solid black;
display: flex;
flex-direction: column-reverse;
}
Hope you got a basic idea about how to get started with Flexbox👩💻
Keep Learning!!🤘✌️
Top comments (0)