Yogesh Chauhan's Blog

« Previous Next »

Gap in Flex?

in CSS on July 21, 2021

flex flexbox gap grid

Yes.

Gap in Flex.

Just like grid, gap works on Flex and columns too.

You can actually create a nice grid without even using CSS grid.

I you have an old site and you’re adding the gap using margin-bottom and margin right to create a nice grid. But you can just use gap instead. Keep in mind that some browsers still don’t support it completely.

Here’s one example of creating a grid view using flex and flex-gap. I have a fixed height and width set but you can always make the flex-items equal and leave those units set as 100%.

« Previous Next »

Murach's MySQL

Recently Posted

Jul 22 Is there a CSS parent selector? Jul 22 Difference between :where and :is in CSS Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? Jul 22 Control Scrolling with CSS Scroll Snap Jul 21 Control rendering using CSS content-visibility property

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

Visual Studio Code Distilled: Evolved Code Editing for Windows, macOS, and Linux

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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?

You might also like these

bin2hex() and chr() String Functions in PHPPHP RBV Framework and closing of big brandsMiscellaneous Unary Operators in JavaScriptJavaScript Quick Introduction to 11 Array Iteration Methods in JavaScriptJavaScript How to Sort (Shuffle) an Array in Random Order in JavaScript?JavaScript 10 Usability Blunders to AvoidUI/UX Create a menu with a curtain falling animation using CSS and JavaScriptCSS How to overwrite file contents with new content in PHP?PHP OOP, Class and Objects Strategies For Beginners (PHP)PHP What’s new in Constructor in PHP 8?PHP How to add multiple components in React app?React How to modify navigation menus in WordPress?WordPress