CSS Flex Box

The flexbox in CSS is a one-dimensional model, it contains flexible and efficient layouts.It is a layout model which provide easy way to arrange items in a container.Flexbox is useful to create small scale layout and responsive layouts.

𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬 𝐨𝐟 𝐅𝐥𝐞𝐱 𝐁𝐨𝐱

Here are the features of flex Box.

Flexibility
Arrangement of items.
Order and sequencing of items.
Proper spacing

𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 𝐨𝐟 𝐅𝐥𝐞𝐱 𝐁𝐨𝐱

Majorly Here are two types of components in flexbox which are following.

𝟏. 𝐅𝐥𝐞𝐱 𝐂𝐨𝐧𝐭𝐚𝐢𝐧𝐞𝐫

Flex container is parent div which contains various divisions in itself.

𝟐. 𝐅𝐥𝐞𝐱 𝐈𝐭𝐞𝐦𝐬

Flex items are the items which are inside of the container div.

Here is the example for creating flex Box.

<html>
<head>
<title>CSS Flex Box</title>
<style>
    .container{
        display : flex;
        flex-direction: row;
        background-color : #000;
    }
    .item{
        background-color:#EB4D4B;
        margin : 10px;
        padding : 10px;
    }
</style>
</head>
<body>
<h1>Hello CSS FlexBox</h1>
<div class="container">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
</div>
</body>
</html>

𝐅𝐥𝐞𝐱 𝐁𝐨𝐱 𝐀𝐱𝐞𝐬

Whenever we work with flexbox,we always deal with two axex,which are following.

𝟏. 𝐌𝐚𝐢𝐧 𝐀𝐱𝐞𝐬

𝟐. 𝐂𝐫𝐨𝐬𝐬 𝐀𝐱𝐞𝐬

Some of the properties of flex Box are following.

flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
justify-content:center;
align-item:center;

CSS Flex Box

Table of contents

No headings in the article.