DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Prerna02
Prerna02

Posted on

CSS-Flexbox

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! 😁

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.