Yogesh Chauhan's Blog

How to make flexbox items of the same size?

in CSS on March 27, 2021

CSS flexbox, just like CSS grid, is really handy when it comes creating a powerful, robust and responsive structure across all devices.

In CSS grid, it’s a bit easier to make the items of equal width. In a flexbox, it’s not hard but it just take a complete understanding of how the flex properties work.

Look at these examples below with few flex items.

As you can see in the first example, when we have items with same number of characters, it doesn’t require any width adjustment. But as you can see in the second example, when we have different kinds of content in different flexbox items then it it requires some kind of width adjustment to make it look good.

You can try to adjust the width of the individual flex items but there is an easier way to do that.

We can use flex shorthand property to make the flex items of equal width.

Just like this example:

flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. So, if you’d like, you can use all 3 properties separately as well. Just like this example.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Content types in DrupalDrupalHow to check if checkbox is checked or not using JavaScript?JavaScriptHow to show confirmation alerts with OK and cancel buttons using Swift 5?SwiftForcing the domain to serve securely using HTTPSMiscellaneousWindow setInterval() Method in JavaScriptJavaScriptHow to create a circle that follows a cursor using JavaScript and CSS?CSS:in-range and :out-of-range selector in CSSCSSKilling A Project Part 3: How can an organization ensure that a doomed project is killed as early as possible?MiscellaneousMake sure your links have descriptive textUI/UXWhat is React? Learn the basicsReactHow to remove special characters (dash, asterisk etc) from any string in PHP?PHP4 different ways to create JavaScript ObjectsJavaScript