Gaurav

Posted on Aug 30, 2020

CSS FLEXBOX - A STARTER KIT

#html #css #webdev #frontend

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!!🤘✌️

DEV Community