Primer CSS Flexbox Responsive Flex Utilities
Last Updated :
25 May, 2022
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.
Primer CSS Flexbox Responsive Flex utilities provide a flexible and responsive one-dimensional layout model that has efficient layouts with distributed spaces among items within a container. They are useful for creating small-scale layouts and are responsive and mobile-friendly adjusting their alignment structure too. Proper spacing, order, and sequencing of items are also taken care of.
Primer CSS flexbox utilities can be adjusted for all breakpoints sm (min-width: 544px), md (min-width: 768px), lg (min-width: 1004px), xl (min-width: 1280px) for various flex properties.
Example classes:
- flex-lg-row: This class is used to set the flex behavior of items for a large screen row with min-width 1004px.
- flex-xl-column: This class is used to set the flex behavior of items for an extra-large screen column with a min-width 1280px.
- flex-sm-wrap: This class is used to set the wrap behavior of flexible items for a small screen with a min-width 544px.
- flex-lg-nowrap: This class is used to set the nowrap behavior of flexible items for a large screen with a min-width 1004px.
- flex-lg-self-start: This class is used to set the self-start behavior of flexible items for a large screen with a min-width 1004px.
Syntax:
flex-[breakpoint]-[property]-[behavior]
Note: Each responsive style is applied to the specified breakpoint.
Example 1: The following code demonstrates the flex-sm-self-stretch class for Primer CSS Responsive Flex utility. The first box is self-stretched due to the class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Flexbox</strong>
<br/>
<br/>
</center>
<div style="height:150px;" class=
"border d-flex flex-items-start flex-sm-items-center
flex-justify-start flex-lg-justify-between">
<div class="p-5 border flex-sm-self-stretch">
flex-sm-self-stretch box
</div>
<div class="p-5 border">box 2</div>
<div class="p-5 border">box 3</div>
<div class="p-5 border">box 4</div>
</div>
</div>
</body>
</html>
Output:
Example 2: The following code demonstrates the flex-lg-nowrap class for Primer CSS Responsive Flex utility. Refer to the output for the no-wrap utility.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Flexbox nowrap</strong>
<br/>
<br/>
</center>
<div style="height:150px;" class=
"border d-flex flex-items-start">
<div class="p-5 border flex-lg-nowrap">
flex-lg-nowrap
</div>
<div class="p-5 border">box 2</div>
<div class="p-5 border">box 3</div>
<div class="p-5 border">box 4</div>
<div class="p-5 border">box 5</div>
<div class="p-5 border">box 6</div>
<div class="p-5 border">box 7</div>
<div class="p-5 border">box 8</div>
</div>
</div>
</body>
</html>
Output:
Example 3: The following code demonstrates the flex-sm-wrap class for Primer CSS Responsive Flex utility where the boxes are wrapped in the main container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Primer CSS Flexbox sm wrap</strong>
<br/>
<br/>
</center>
<div style="height:200px;" class=
"border d-flex flex-items-start flex-sm-wrap">
<div class="p-5 border">box 1</div>
<div class="p-5 border">box 2</div>
<div class="p-5 border">box 3</div>
<div class="p-5 border">box 4</div>
<div class="p-5 border">box 5</div>
<div class="p-5 border">box 6</div>
<div class="p-5 border">box 7</div>
<div class="p-5 border">box 8</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/utilities/flexbox#responsive-flex-utilities
Similar Reads
Primer CSS Flexbox Flex Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Flex classes are u
3 min read
React Suite FlexboxGrid Responsive React Suite is a front-end library designed for the middle platform and back-end products. React Suite FlexboxGrid component allows the user to use 24 grids as it is a grid layout component. The FlexboxGrid Responsive can be created by combining with the <Col> component. Note: We are passing C
4 min read
Foundation CSS Flexbox Utilities Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flexbox Utilities: In Foundation CSS, Flexbox classes a
3 min read
Primer CSS Flexbox Required Reading In this article, we will see the required reading. Primer CSS is a free open-source CSS framework based on principles that set the foundation for basic design elements like spacing, typeface, and color. This rigorous approach ensures that our patterns are consistent and interoperable. Flexbox is a f
6 min read
Foundation CSS Flexbox Utilities Source Ordering Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass
3 min read
Foundation CSS Flexbox Utilities Sass Reference Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flexbox Utilities: In Foundation CSS, Flexbox class
3 min read