Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
What is Display Flex Property in CSS?
CSS Flex allows you to create more powerful and stable web layouts. Even the fundamentals provide you with a lot of flexibility when it comes to organizing items on the page. In this post, you learn what is display flex property in CSS and how to use Flex box to align HTML elements. The flex-direction, justify-content, align-self, align-items, align-content, and gap properties are all included.
CSS flex attributes make it possible to align things more easily and responsively. This is helpful when you want your HTML components to be more responsive within the web browser.
What is Display Flex Property in CSS?
A number of child divs under a single parent div is an example structure you may use to learn the basics of display flex box. There is an important “parent” div in the code below. The three child divs indicate things that can be aligned with the use of flex attributes.
<body>
<div class="parent">
<div class="child-item"></div>
<div class="child-item"></div>
<div class="child-item"></div>
</div>
</body>
You must add the display: flex attribute to the parent flex containers for any flex styling to work.
<style>
.parent {
display: flex;
}
</style>
Without flex, the child divs appear in a vertical arrangement down the page, one after the other.
View and execute the code in this CodePen snippet to see an example of this setup.
How to Control Layout Direction
The column or row path of the child items is set by the flex-direction property.
The ones that follow are some flex-direction property options:
flex-direction: row | column | row-reverse | column-reverseYou’ll have to add a parent container around the things you want to align.
HTML:
<!-- What is Display Flex Property in CSS-->
<body>
<div class="parent">
<div class="green"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="purple"></div>
</div>
</body>
CSS:
<style>
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
.parent div {
width: 40px;
height: 40px;
}
</style>
The flex-direction attribute is applied to the parent flex container. The children of the div items will be aligned as a result of this.
.parent {
width: 300px;
display: flex;
flex-direction: row;
}
Many flex features make use of the main axes and cross-axis concepts. When the flex-direction is set to row, the main axis indicates horizontal direction while the parallel axis represents vertical direction. A column value changes these axes.
Aligning Items along the Cross Axis
The align-items attribute determines how items are aligned along the cross-axis. The upward alignment of what is displayed is managed by aligning items for the usual flex-direction, row.
Options for the align-items property include:
align-items: flex-start | flex-end | align-items | stretchTo arrange the children of it, add the align-items attribute to the parent container.
.parent {
display: flex;
align-items: flex-start;
}
You can also select to align the elements using a baseline. The baseline option, by default, aligns all objects based on their base.
You can also specify whether the baseline should begin at the top (first baseline) or bottom (last baseline).
align-items: baseline | first baseline | last baseline;To make the align-items: baseline function, each item must have a separate height or width (based on the axis you’re using).
<div class="parent">
<div class="red" style="height:20px"></div>
<div class="orange" style="height:60px"></div>
<div class="yellow" style="height:30px"></div>
<div class="green" style="height:90px"></div>
<div class="blue" style="height:30px"></div>
<div class="purple" style="height:50px"></div>
</div>Overriding Alignment on Individual Items
You can use the align-self attribute to override the parent container’s align-items style. This implies that you can provide a different flex alignment for each item.
The align-self property has the following options:
align-self: auto | flex-start | flex-end | center | baseline | stretchAssume that the parent container has “row” as its flex-direction styling.
.parent {
display: flex;
flex-direction: row;
}
You can use the align-self attribute on a single object. The design of the align-self attribute will be applied to the individual item, which will center it over the parent container.
<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green" style="align-self:center"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>
Line Distribution across the Cross Axis
The align-content attribute arranges children across their vertical axis. It can also identify the gap across items on different lines.
The align-content property has the following options:
align-content: flex-start | flex-end | center | stretch | space-between |The align-content property should be added within the parent flex container. Only if the flex-wrap attribute is set can the align-content feature work. To get the components into more than one line, add flex-wrap: wrap into the parent container while decreasing the width within the parent div.
.parent {
flex-wrap: wrap;
display: flex;
align-content: flex-start;
width: 180px;
}
Aligning Items on the Main Axis
The justify-content attribute gives the child items right, left, or center alignment. When justifying stuff, it also distributes out the pieces by adding gaps between them.
Wrap the items you would like to align inside a parent flex container as an option for the justify-content property.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyHTML:
<div class="parent">
<div class="green"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>
CSS:
.green { background-color: green; }
.blue { background-color: blue; }
.purple { background-color: purple; }
The justify-content property should be added in the parent flex container.
.parent {
width: 300px;
display: flex;
justify-content: flex-start;
}
The justify-content property accepts values from the CSS Box Alignment requirement as well. This comprises values like “start”, “end”, “left” and “right”. These aren’t supported by all browsers.
You can also utilize the justify-content property’s “safe” keyword. This makes sure the elements work to stay within the parent container’s range.
It can also be used to avoid data loss if you center a long word. Adding the safe keyword avoids the first and last individuals from being cut off by a shorter div.
.parent {
display: flex;
justify-content: safe center;
}
The safe term is also restricted to particular browsers. Can I use it? Helps you to check suitability.
How to Increase Item Spacing
You can add space between items using the gap property. It’s one of the most modern CSS elements that can help you with building a responsive layout.
The gap property should be provided on the parent flex container.
.parent {
width: 300px;
gap: 70px;
}
If you add a gap that causes the items’ length to go over the width of the parent, they will be reduced to fit within the row.
.parent {
width: 300px;
gap: 120px;
}
The gap size also applies to the gap between the rows when you used flex-wrap: wrap to move items into a new line.
.parent {
width: 300px;
flex-wrap: wrap;
gap: 120px;
}
You can also change the row-gap or column-gap attributes. Again, these must be applied on the parent flex container.
The row-gap property provides the amount of space across each row. The column-gap variable specifies the amount of space across each column.
.parent {
row-gap: 120px;
}
.parent {
column-gap: 120px;
}
More Flex Features on Your Website
You should now be familiar with the many flex properties and you also learned what is display flex property in CSS and how to use flexbox to align HTML elements. This includes the flex-direction, justify-content, align-self, align-items, align-content, and gap properties.
Flexbox is a useful layout method, however, it is only one component of CSS. You may also learn new CSS attributes, clean coding methods, and CSS optimization tools.
