Properties for the Parent or Children
The Flexbox Properties can be implemented to Parent element or the Child element, i.e. the various CSS Flex Properties can be applied to the flex container and the flex items.
Properties for the flex container
The following are the list of properties that can be applied to the flex container.
Property | Descriptions | Syntax |
---|---|---|
display | Specifies the type of box used for an HTML element (block or inline). | .container { display: flex; } |
flex-direction | Determines the primary axis direction for flex container layout. | .container { display: flex; flex-direction: row | row-reverse | column | column-reverse; } |
flex-wrap | Controls whether flex items are forced onto one line or can wrap onto multiple lines. | .container { display: flex; flex-wrap : nowrap | wrap | wrap-reverse; } |
justify-content | Aligns flex items along the main axis, distributing space between or around them. | .container { display: flex; justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly; } |
align-self | Overrides the default alignment for a specific flex item within the container. | .container{ align-self: center; } |
align-items | Align flex items along the cross-axis within the container. | .container { align-items: stretch | flex-start | flex-end | center | baseline; } |
align-content | Aligns lines of flex items along the cross-axis when multiple lines are present. | .container { display: flex; align-content: flex-start | flex-end | center | space-between | space-around | stretch; } |
flex-grow | Defines the ability of a flex item to grow proportionally within the flex container. | .item1 { flex-grow: 1; } |
flex-shrink | Determines the ability of a flex item to shrink proportionally within the flex container. | .item { flex-shrink: 3; // default is 1 } |
flex-basis | Specifies the initial size of a flex item along the main axis. | .item { flex-basis: <length> | auto | content; // default is auto } |
display property
The display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.
Property | Descriptions | Syntax |
---|---|---|
display: flex; | The property applies to the container, makes the container a block element, and enables a flex context for all its direct children | .container { display: flex; } |
display: inline-flex; | The display: inline-flex; works in a similar way. It only creates a container that’s an inline element. | .container { display: inline-flex; } |
flex-direction property
The flex-direction is a CSS property that defines the primary axis of a flex container, determining the direction in which its flex items are placed.
Property | Descriptions | Syntax |
---|---|---|
row | Arrange items in a horizontal row, default direction. | flex-direction: row; |
row-reverse | Arrange items in a horizontal row but in the reverse order. | flex-direction: row-reverse; |
column | Arrange items in a vertical column. | flex-direction: column; |
column-reverse | Arrange items in a vertical column but in the reverse order. | flex-direction: column-reverse; |
flex-wrap property
The flex-wrap is a CSS property used in flex containers to control whether the flex items should wrap to a new line or stay on the same line.
Property | Descriptions | Syntax |
---|---|---|
wrap | Items are wrapped onto multiple lines, and arranged from top to bottom. | .container { display: flex; flex-wrap: wrap; } |
nowrap | All flex items are arranged on a single line. | .container { display: flex; flex-wrap: nowrap; } |
wrap-reverse | It repositions flex items onto multiple lines, wrapping from bottom to top. | .container { display: flex; flex-wrap: wrap-reverse; } |
justify-content property
The justify-content is a CSS property in flex containers that aligns flex items along the main axis. It determines how extra space is distributed.
Property | Descriptions | Syntax |
---|---|---|
flex-start | Align items to the start of the container. | justify-content: flex-start; |
flex-end | Align items to the end of the container. | justify-content: flex-end; |
center | Centers items along the horizontal axis. | justify-content: center; |
space-between | Items are evenly distributed with the first at the start and the last at the end. | justify-content: space-between; |
space-around | Distributes items evenly with equal space around them. | justify-content: space-around; |
space-evenly | Provides equal space around items, including at the start and end. | justify-content: space-evenly; |
align-items property
The align-items is a CSS property used in flex containers to define how flex items align along the cross-axis.
Property | Descriptions | Syntax |
---|---|---|
stretch | Stretches items to fill the container along the cross-axis. | align-items: stretch; |
flex-start | Align items to the start of the container cross-axis. | align-items: flex-start; |
flex-end | Align items to the end of the container cross-axis. | align-items: flex-end; |
center | Centers items along the container’s cross-axis. | align-items: center; |
baseline | Items are aligned to the baseline of the container. | align-items: baseline; |
align-content property
The align-content is a CSS property applied to flex containers to control the alignment of lines along the cross axis when there’s extra space.
Property | Descriptions | Syntax |
---|---|---|
stretch | Fills the available space, making lines stretch. | align-content: stretch; |
flex-start | Packs lines at the start of the container. | align-content: flex-start; |
flex-end | Packs lines at the end of the container. | align-content: flex-end; |
center | Centers lines within the container. | align-content: center; |
space-between | Evenly distributes lines, starting from the container’s beginning to the end. | align-content: space-between; |
space-around | Evenly distributes lines with equal space around them. | align-content: space-around; |
The align-content property is effective when two criteria are fulfilled:
- The flex container must have the wrap property applied, allowing flex items to wrap onto multiple lines.
- The height of the flex container should exceed the height of the flex items’ lines.
Complete Guide to CSS Flexbox
Flexbox, short for Flexible Box Layout, is a powerful CSS layout model that simplifies the creation of responsive and adaptable web designs. It excels at arranging elements within a container, optimizing space distribution, and handling dynamic content. This article will cover the basic idea of CSS Flexbox, along with various properties available for the Flexbox & understand them with the help of suitable examples.
Syntax:
.container { display: flex; flex-direction: row; /* or column, etc. */ }
Example: In this example, all the flex properties will be used just by changing the “container class” and “item class”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Styled Items</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
background-color: #f8acff;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
background-color: darkgray;
box-sizing: border-box;
width: 30%;
height: 30vh;
}
.item {
width: 90px;
height: 80px;
display: flex;
margin: 0;
align-items: center;
justify-content: center;
border: 2px solid #333;
box-sizing: border-box;
}
.item:nth-child(1) {
background-color: #3498db;
}
.item:nth-child(2) {
background-color: #2ecc71;
}
.item:nth-child(3) {
background-color: #e74c3c;
}
.item:nth-child(4) {
background-color: #f39c12;
}
.item:nth-child(5) {
background-color: magenta;
}
</style>
</head>
<body>
<h3>flex-basis</h3>
<div class="container">
<p class="item item1">Item1</p>
<p class="item item2">Item2</p>
<p class="item item3">Item3</p>
<p class="item item4">Item4</p>
</div>
</body>
</html>
Output:
Contact Us