DEV Community

Cover image for CSS FLEXBOX - A STARTER KIT
Gaurav
Gaurav

Posted on

CSS FLEXBOX - A STARTER KIT

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😲😲
Flexbox
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;
}

Flexbox

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;
}

Flexbox

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;
}

Flexbox

row-reverse

.container {
    border: 5px solid black;
    display: flex;
    flex-direction: row-reverse;

Flexbox

column

.container {
    border: 5px solid black;
    display: flex;
    flex-direction: column;
}

Flexbox

column-reverse

.container {
    border: 5px solid black;
    display: flex;
    flex-direction: column-reverse;
}

Flexbox

Hope you got a basic idea about how to get started with FlexboxπŸ‘©β€πŸ’»
Keep Learning!!🀘✌️

Top comments (0)