Online Training
Q4 2024
Nov 19 to Dec 10
11.00 AM EST: USA, UK, Canada, Mexico and Europe
06.00 AM GMT: MiddleEast, Asia and Australia
Flexbox is a CSS layout module that allows you to create flexible and responsive layouts. By setting an element to use Flexbox, you make it a flex container that distributes space among its child elements, called flex items.
.container {
display: flex;
}
The justify-content property aligns flex items along the main axis (e.g., horizontally). You can center items, push them to the start, or spread them out.
/* Center items in the container */
.container {
display: flex;
justify-content: center;
}
/* Align items to the start of the container */
.container {
display: flex;
justify-content: flex-start;
}
The flex property controls how flex items grow and shrink. You can set items to grow or shrink relative to each other based on their flex values.
/* Grow and shrink flex items */
.item {
flex: 2 1 150px;
}
/* Equivalent to the above */
.item {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 150px;
}
The flex-direction property changes the direction in which flex items are laid out. You can switch between rows and columns, or reverse their order.
.container {
display: flex;
flex-direction: row-reverse;
}
The flex-grow property defines how much a flex item will grow relative to other items if there's extra space in the container.
/* This item grows more than the other item */
.item {
flex-grow: 2;
}
The flex-shrink property specifies how flex items shrink when there is not enough space in the container.
.item {
flex-shrink: 1;
/* Shrinks normally */
}
.item {
flex-shrink: 2;
/* Shrinks twice as much as other items */
}
The flex-basis property sets the initial size of a flex item before it starts growing or shrinking.
.item {
flex-basis: 150px;
}
The flex-flow property is a shorthand for setting both the flex-direction and flex-wrap properties at once.
.container {
display: flex;
flex-flow: row wrap;
}
The display: inline-flex property makes the flex container behave like an inline element, while still applying flexbox layout rules.
.container {
display: inline-flex;
}
The flex-wrap property controls whether flex items should wrap onto multiple lines or stay on a single line.
.container {
display: flex;
flex-wrap: wrap;
}
The grid-template-columns property specifies the number and size of columns in a grid layout. You can use pixels, percentages, or other units.
.grid-container {
display: grid;
grid-template-columns: 20px 20% 60%;
}
The fr unit in CSS Grid distributes available space among grid columns or rows. It helps to create proportional layouts.
/* Columns take up fractions of the total space */
.grid {
display: grid;
grid-template-columns: 1fr 60px 1fr;
}
The grid-gap property sets the size of the space between rows and columns in a grid layout. You can specify different gaps for rows and columns.
.grid-container {
display: grid;
grid-gap: 20px 10px;
}
The display: grid property sets an element to be a block-level grid container. It allows nested items to follow grid layout rules.
.grid-container {
display: grid;
}
The grid-row property sets where a grid item starts and ends in terms of rows. It’s a shorthand for grid-row-start and grid-row-end.
.item {
grid-row: 1 / span 2;
}
The display: inline-grid property makes the grid container behave like an inline element, while still applying grid layout rules.
.grid-container {
display: inline-grid;
}
The minmax() function sets a minimum and maximum size for grid columns or rows. This allows for flexible sizing based on the container's size.
.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}
The grid-row-start and grid-row-end properties specify where a grid item starts and ends within rows. The shorthand grid-row combines these two properties.
.item {
grid-row-start: 2;
grid-row-end: span 2;
}
The grid-row-gap property sets the space between rows in a grid layout.
.grid {
grid-row-gap: 10px;
}
The grid-area property specifies a grid item's size and location in the grid. It’s a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
.item {
grid-area: 2 / 1 / span 2 / span 3;
}
The justify-items property controls the alignment of items within their grid area along the row axis.
.grid-container {
display: grid;
justify-items: center;
}
The align-self property allows individual grid items to be aligned within their grid area, overriding the default alignment for the container.
.item {
align-self: center;
}
The grid-template-areas property defines named grid areas, allowing you to place grid items based on these names.
.grid-container {
display: grid;
grid-template-areas:
'header header'
'main sidebar'
'footer footer';
}
.item-header { grid-area: header; }
.item-main { grid-area: main; }
.item-sidebar { grid-area: sidebar; }
.item-footer { grid-area: footer; }
The align-content property aligns the entire grid within its container along the column axis, affecting the spacing between rows.
.grid-container {
display: grid;
align-content: space-between;
}
Favourites
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Java
HTML and CSS 
Python
Javascript
Troubleshooting
Blogs
Learn
Tools