YogeshChauhan.com

How to make flexbox items of the same size?

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.

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to CREATE TABLE in SQL with and without using Another Table?SQL/MySQL5 Steps to Create a Line using Canvas Tag in HTML5HTMLSQL Inner JoinSQL/MySQLList of all Pseudo Elements in CSSCSSIs monitoring an employee’s work on a computer a desirable or undesirable activity?MiscHow to get category name using post id in WordPress?WordPressHow to make WordPress main stylesheet (style.css)?WordPressHow to center an image horizontally and vertically?CSSWhat is Hadoop and Hadoop Ecosystem?MiscLIMIT and OFFSET in PostgresPostgresAttributes and Properties in JavaScript and HTMLHTMLSQL GROUP BY StatementSQL/MySQL