CSS flex box is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).
CSS Flex box-modules
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
Flex box-container
An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area’s container’s display property to flex or inline-flex.
flex-container > div {
background-color: #F0F8FF;
margin: 15px;
padding: 25px;
font-size: 35px;
Flex box-items
The direct child elements of a flex container automatically becomes flexible (flex) items.
.flex-container > div {
background-color: AquaBlue;
color: white;
width: 200px;
margin: 50px;
text-align: center;
line-height: 85px;
font-size: 40px;
}
Flex box-responsive
CSS Flex box-responsive is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes.
@media (max-width: 700px) {
.flex-item-right, .flex-item-left {
flex: 100%;