DEV Community

Prerna Sharma
Prerna Sharma

Posted on

8 4 1 1 1

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay