How to Make Flexbox Items of Same Size Using CSS?
Last Updated :
19 Nov, 2024
To make Flexbox items the same size using CSS, you can use various properties to control the dimensions of the items and ensure consistency in layout. By default, Flexbox items can have different sizes based on their content, but with a few CSS changes, you can make them uniform.
1. Using Flex Property
The container div, namedflex-containerinside it, creates three divs for three items. Style the flex-container by using border, display: flex, and sets width and height. Use the flex: 1 andheight: 90% properties on Flexbox items within a container and ensure each item takes up an equal share of available space.
HTML
<div class="main">
<h1>GeeksForGeeks</h1>
<h2> Using Flex Property for
same size of Flexbox items
</h2>
<div class="flex-container">
<div class="flex-item">
Item 1
</div>
<div class="flex-item">
Item 2
</div>
<div class="flex-item align-right">
Item 3
</div>
</div>
</div>
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.main {
width: 80%;
height: 50%;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 40px;
color: green;
}
h2 {
text-align: center;
color: rgb(55, 0, 255);
}
.flex-container {
border: 5px solid rgb(55, 139, 22);
width: 100%;
height: 75%;
align-items: center;
display: flex;
}
.flex-item {
flex: 1;
height: 90%;
text-align: center;
background-color: rgb(184, 233, 181);
border: 1px solid #ccc;
margin: 5px 10px;
}
Output
Make Flexbox Items The Same Size Using CSS2. Using Width Property
The container div, named flex-containerinside it, creates, three div for three items. Style the flex-container by using border, display: flex and sets width and height. Use the width:30% and height: 90% properties on Flexbox items within a container and ensure each item has equal same.
HTML
<div class="main">
<h1>GeeksForGeeks</h1>
<h2> Flexbox items the same
size using Width Property
</h2>
<div class="flex-container">
<div class="flex-item">
Item 1
</div>
<div class="flex-item">
Item 2
</div>
<div class="flex-item align-right">
Item 3
</div>
</div>
</div>
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.main {
width: 80%;
height: 50%;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 40px;
color: green;
}
h2 {
text-align: center;
color: rgb(55, 0, 255);
}
.flex-container {
border: 2px solid red;
width: 100%;
height: 80%;
align-items: center;
display: flex;
align-self: center;
justify-content: center;
}
.flex-item {
width: 30%;
height: 90%;
text-align: center;
background-color: rgb(248, 123, 242);
border: 1px solid #ccc;
margin: 5px 10px;
}
Output
Make Flexbox Items The Same Size Using CSS3. Using calc() Property
The container div, namedflex-container createsinside it, create three divs, for three items. Style the flex-containerby using border, display: flex, and sets width and height. Use thecalc(100%/3) (divide no. of items) and height:90% properties on Flexbox items within a container and ensure each item takes up an equal share of available space.
HTML
<div class="main">
<h1>GeeksForGeeks</h1>
<h2> Flexbox items the same
size by calc() property
</h2>
<div class="flex-container">
<div class="flex-item">
Item 1
</div>
<div class="flex-item">
Item 2
</div>
<div class="flex-item align-right">
Item 3
</div>
</div>
</div>
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.main {
width: 80%;
height: 50%;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 40px;
color: green;
}
h2 {
text-align: center;
color: rgb(55, 0, 255);
}
.flex-container {
border: 2px solid red;
width: 100%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 0px 5px;
}
.flex-item {
width: calc(100%/3);
height: 90%;
text-align: center;
background-color: rgb(6, 173, 56);
border: 1px solid #ccc;
margin: 5px 10px;
}
Output
Make Flexbox Items The Same Size Using CSS4. Using Grid Property
The container div, named grid-containerinside it, createsthree divs for three items. Style the grid-container by using border, display: flex, and sets width and height. CSS Grid properties, such as grid-template-columns: repeat(3, 1fr), ensure consistent sizing of each grid item.
HTML
<div class="main">
<h1>GeeksForGeeks</h1>
<h2>Equal Size Items
using Grid Property
</h2>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</div>
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
text-align: center;
font-size: 40px;
color: green;
}
h2 {
text-align: center;
color: rgb(55, 0, 255);
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
border: 3px solid blue;
margin-top: 20px;
padding: 10px;
width: 80vh;
height: 28vh;
}
.grid-item {
height: 100%;
text-align: center;
background-color: #3498db;
border: 2px solid #ccc;
}
Output
Make Flexbox Items The Same Size Using CSS
Similar Reads
How to set the size of specific flex-item using CSS? To set the size of a specific flex item using CSS, you can use the flex property. This property allows you to specify the initial size, grow factor, and shrink factor of the item, controlling its behavior within the flex container. Flex follows pre-defined properties to change the size of the flex i
3 min read
How to Align One Item to the Right using CSS Flexbox ? Methods to Align a Single Item to the Right using CSS Flexbox:1. Using margin-left: autoApplying margin-left: auto to the specific flex item pushes it to the right, utilizing the available space.HTML<html> <head> <style> .flex-container { display: flex; background-color: #f0f0f0; p
3 min read
How to Arrange Two Items Per Row Using Flexbox? Flexbox in CSS is a powerful layout module that allows you to easily design complex layouts. It provides an efficient way to distribute space among items in a container, even when their sizes are unknown or dynamic.Below are the approaches to Arrange Two Items Per Row Using Flexbox:Table of ContentU
2 min read
How to Make One Flex Item Full-Width in CSS Flexbox? Here are the methods to make a single flex item take up the full width in CSS Flexbox:1. Using flex: 1 1 100% and orderBy setting flex: 1 1 100% on the desired item, it will occupy the full width of the container. The order property can be used to position this item within the flex container.HTML
3 min read
How to make Flexbox Children 100% Height of their Parent using CSS? Flexbox is an incredibly useful tool for creating responsive layouts and distributing space evenly among child elements. When you want flexbox child elements to take up the full height of their parent container.1. Using Flexbox and Height PropertyWe can use the display: flex property to create a fle
2 min read
How to Align Images Side By Side using CSS ? Images side by side means placing multiple images in a single row next to each other. This arrangement shows images in a horizontal line, making it great for photo galleries, and comparing pictures. To align images side by side using CSS, we can use flexbox or grid for layout.Table of ContentUsing t
2 min read
How to use Flex to Shrink an Image in CSS ? Shrinking an image in CSS means reducing its size to fit within a container. Using Flexbox, you can apply the flex-shrink property to control how much an image shrinks relative to other elements in a flex container, ensuring responsive resizing when space is limited.Syntaxflex-wrap: wrapNote: wrap i
1 min read
How to Align Items to End Position using CSS ? To align elements to the end, you can use the CSS property justify-content: flex-end; in a flexbox container, and for aligning elements to the end vertically, you can use the CSS property align-items: flex-end; in a flexbox container. This property aligns the flex items along the cross-axis (vertica
2 min read
How to move Flex Items to the Right in Tailwind CSS ? Aligning flex items to the right within a flex container refers to positioning the child elements (flex items) towards the right-hand side of the container when using the flexbox layout in CSS. This alignment can be achieved through various techniques or Tailwind CSS utility classes. Table of Conten
3 min read
How to Prevent Flexbox Shrinking in CSS? The Flexbox is a powerful layout module in CSS that makes it easy to design flexible and responsive layouts. However, one common issue that developers face is preventing the flex items from shrinking. The Flexbox or the Flexible Box Layout is a layout model that allows elements within the container
3 min read