Primer CSS Flexbox Align Items Last Updated : 24 Apr, 2022 Comments Improve Suggest changes Like Article Like Report 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 Align Items used to align items on the cross axis. The cross axis always runs perpendicular to the main axis. These classes are used to define the position of flex items according to the cross axis. Primer CSS Flexbox Align Items Classes: flex-items-start: This class is used to align flex items to the start of the cross axis.flex-items-end: This class is used to align flex items to the end of the cross axisflex-items-center: This class is used to align flex items to the center of the cross axisflex-items-baseline: This class is used to align flex items along their baseline.flex-items-stretch: This class is used to stretch flex items from the start of the cross-axis to the end of the cross axis. Syntax: In this syntax, we will use only one class, other classes can be used as well as a replacement. <div class="border d-flex flex-items-start"> ... </div> Example 1: This example demonstrates the use of Primer CSS Flexbox Align Items. HTML <!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Align Items </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h4 class="text-center font-bold"> Primer CSS Flexbox Align Items </h4> <strong>Flexbox flex-items-start Class:</strong> <br> <div class="border d-flex m-2 flex-items-start" style="min-height: 150px;"> <div class="p-5 border color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-items-end Class:</strong> <br> <div class="border d-flex m-2 flex-items-end" style="min-height: 150px;"> <div class="p-5 border color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-items-center Class:</strong> <br> <div class="border d-flex m-2 flex-items-center" style="min-height: 150px;"> <div class="p-5 border color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> </body> </html> Output: Primer CSS Flexbox Align Items Example 2: This is another example that demonstrates the use of Primer CSS Flexbox Align Items. HTML <!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Align Items </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h4 class="text-center font-bold"> Primer CSS Flexbox Align Items </h4> <strong>Flexbox flex-items-baseline Class:</strong> <br> <div class="border d-flex m-2 flex-items-baseline" style="min-height: 150px;"> <div class="p-5 border color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-items-stretch Class:</strong> <br> <div class="border d-flex m-2 flex-items-stretch" style="min-height: 150px;"> <div class="p-5 border color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> </body> </html> Output: Primer CSS Flexbox Align Items Reference: https://primer.style/css/utilities/flexbox#align-items Comment More infoAdvertise with us Next Article Primer CSS Flexbox Align Items S skyridetim Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Flexbox Align Self 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 Align Self classes 3 min read Primer CSS Flexbox Grids 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 ste 3 min read Primer CSS Flexbox Align Content 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 Align Content is u 4 min read CSS Flexbox and Its Properties CSS Flexbox, or Flexible Box Layout, is the layout model designed to create flexible and responsive layout structures without using float or positioning. By applying display: flex to a parent container, it becomes a flex container, and its children become flex items. This allows control over the ite 3 min read Primer CSS Flexbox 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.Primer CSS Flexbox:Flex container: Flex Container is used to make 6 min read Primer CSS Flexbox Bugs 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. Flexbox is the flexible box that will 3 min read CSS align-items Property The align-items property in CSS is used to align flex items along the cross-axis within a flex container. It accepts values like flex-start, flex-end, center, baseline, and stretch, controlling the vertical alignment of items in a flexbox.Syntaxalign-items: normal | stretch | center | flex-start | f 7 min read Primer CSS Flexbox Order 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 Order classes are 3 min read Primer CSS Flexbox Flex Container 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 Container is 2 min read Primer CSS Layout Alignment 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. Its approach to CSS is influenced by 2 min read Like