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
}
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
.flexbox {
flex-direction: column;
}
Row
.flexbox {
flex-direction: row;
}
Column-reverse
.flexbox {
flex-direction: column-reverse;
}
Row-reverse
.flexbox {
flex-direction: row-reverse;
}
Justify-Content
Space-between
.flexbox {
justify-content: space-between;
}
Space-Evenly
.flexbox {
justify-content: space-evenly;
}
Space-around
.flexbox {
justify-content: space-around;
}
Align Items
Center
.flexbox {
align-items: center;
}
Flex-start
.flexbox {
align-items: flex-start;
}
Flex-end
.flexbox {
align-items: flex-end;
}
Flex-Wrap Properties
Nowrap
.flexbox {
flex-wrap: nowrap;
}
Wrap
.flexbox {
flex-wrap: wrap;
}
Wrap-reverse
.flexbox {
flex-wrap: wrap-reverse;
}
Top comments (1)
It has been funny to read, thank you for sharing! 😁