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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to change the style for checked radio button or checkboxes using CSS?CSSA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLLearn to create your skill bar using CSSCSSHow to Block IPs and User Agents using code in Drupal or WordPress?DrupalColleague UI Basics: The Context AreaColleagueCreate a galley with overlapping images using CSS gridCSSHow to add Lifecycle Methods to a Class in React?ReactGive buttons accessible namesUI/UXHow to Install PHP Laravel on MacOS Catalina?PHPIntroduction to components and templates Part 1: Component MetadataAngularaddcslashes() and addslashes() String Functions in PHPPHPWordPress: How to loop through a repeater field in ACF?WordPress