DEV Community

Prerna Sharma
Prerna Sharma

Posted on

CSS-Flexbox

#webdev #css

What is Flexbox?

Flexible Box Layout (Flexbox) is a CSS3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.Flexbox consists of Flexbox Container and Flex items

Flex-Container

The outer box, which contains flex-items, is created using display: flex;

.flexbox {
display: flex
}
Enter fullscreen mode Exit fullscreen mode

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

Flex-Items

Direct children of the flex container

Flex-Direction

Column

Image description

.flexbox {
 flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

Row

Image description

.flexbox {
 flex-direction: row;
}
Enter fullscreen mode Exit fullscreen mode

Column-reverse

Image description

.flexbox {
 flex-direction: column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

Row-reverse

Image description

.flexbox {
 flex-direction: row-reverse;
}
Enter fullscreen mode Exit fullscreen mode

Justify-Content

Space-between

Image description

.flexbox {
 justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

Space-Evenly

Image description

.flexbox {
 justify-content: space-evenly;
}
Enter fullscreen mode Exit fullscreen mode

Space-around

Image description

.flexbox {
 justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

Align Items

Center

Image description

.flexbox {
 align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Flex-start

Image description

.flexbox {
 align-items: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

Flex-end

Image description

.flexbox {
 align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Flex-Wrap Properties

Nowrap

Image description

.flexbox {
  flex-wrap: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

Wrap

Image description

.flexbox {
 flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

Wrap-reverse

Image description

.flexbox {
  flex-wrap: wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

It has been funny to read, thank you for sharing! 😁

Read next

muhammadawaisshaikh profile image

Angular Version 19: New Features and Updates

Muhammad Awais -

servbay profile image

🧨 PHP 8.4 Officially Released!

ServBay -

kasir-barati profile image

Module declaration in TS

Mohammad Jawad (Kasir) Barati -

catundanatalia profile image

We are simplifying (literals(arrays and objects)) in Js.

Natália Catunda -