Cheatsheets
Learn Intermediate CSS

Learn Intermediate CSS

Layout with Flexbox

Introduction to Flexbox

The CSS property `display: flex` turns an HTML element into a flex container, making it easier to align and distribute space among its child elements, known as flex items.

                                

.container {
  display: flex;
}

Centering items with justify-content

The `justify-content` property controls how flex items are aligned along the main axis of the container. For example, you can center items or align them to the start or end.

                                

/* Center items in the container */
.container {
  display: flex;
  justify-content: center;
}
/* Align items to the start */
.container {
  display: flex;
  justify-content: flex-start;
}

Sizing Flex items with flex

The `flex` property defines how flex items grow or shrink and their initial size. It’s a shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.

                                

/* Flex item with specified growth, shrinkage, and basis */
.item {
  flex: 2 1 150px;
}

Changing Flex direction

The `flex-direction` property changes the direction of the flex items, either horizontally (`row`) or vertically (`column`).

                                

/* Flex items in reverse row order */
.container {
  display: flex;
  flex-direction: row-reverse;
}

Aligning content with align-content

The `align-content` property adjusts the spacing between rows of flex items when there are multiple rows.

                                

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Growing Flex items with flex-grow

The `flex-grow` property defines how much a flex item should grow relative to other items. A higher number means it will take up more space.

                                

.item-a {
  flex-grow: 1;
}
.item-b {
  flex-grow: 2;
}
/* Item-b grows twice as much as item-a */

Shrinking Flex items with flex-shrink

The `flex-shrink` property determines how flex items should shrink when there is not enough space in the container. Higher values mean more shrinkage.

                                

.item-a {
  flex-shrink: 1;
}
.item-b {
  flex-shrink: 2;
}
/* Item-b shrinks twice as much as item-a */

Setting initial size with flex-basis

The `flex-basis` property sets the initial size of a flex item before any remaining space is distributed. It can be a fixed size or a percentage.

                                

.item {
  flex-basis: 200px;
}

Combining flex properties with flex-flow

The `flex-flow` property combines `flex-direction` and `flex-wrap` into one line. It controls the direction of items and whether they wrap onto multiple lines.

                                

.container {
  display: flex;
  flex-flow: row wrap;
}

Inline Flex containers

The `display: inline-flex` property makes a flex container behave like an inline element, so it only takes up as much width as necessary.

                                

.container {
  display: inline-flex;
}

Grid layout

Defining columns with grid-template-columns

The `grid-template-columns` property sets the number and size of columns in a grid container. Sizes can be in pixels or percentages.

                                

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 300px;
}

Using the fr unit

The `fr` unit divides space proportionally in a grid container. For example, `1fr` takes up one fraction of the available space.

                                

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Setting gaps with grid-gap

The `grid-gap` property controls the spacing between rows and columns in a grid layout.

                                

.grid-container {
  display: grid;
  grid-gap: 20px 10px;
}
/* 20px gap between rows and 10px gap between columns */

Creating a grid container

To make an element a grid container, use `display: grid`. This enables grid layout for its child elements.

                                

.grid-container {
  display: grid;
}

Positioning items with grid-row

The `grid-row` property sets the starting and ending positions of a grid item within rows.

                                

.item {
  grid-row: 1 / span 2;
}
/* Item starts at row 1 and spans 2 rows */

Inline grid containers

The `display: inline-grid` property makes a grid container behave like an inline element, fitting its content without taking up extra space.

                                

.grid-container {
  display: inline-grid;
}

Using minmax() for responsive grids

The `minmax()` function sets a minimum and maximum size for grid columns or rows, allowing them to resize responsively.

                                

.grid-container {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

Positioning items with grid-row-start and grid-row-end

The `grid-row-start` and `grid-row-end` properties define where a grid item starts and ends in terms of rows.

                                

.item {
  grid-row-start: 2;
  grid-row-end: span 2;
}

Setting row gaps with grid-row-gap

The `grid-row-gap` property sets the size of the gap between rows in a grid layout.

                                

.grid-container {
  display: grid;
  grid-row-gap: 20px;
}

Placing items with grid-area

The `grid-area` property allows you to define the size and position of a grid item by specifying its start and end lines for both rows and columns.

                                

.item {
  grid-area: 2 / 1 / span 2 / span 3;
}

Aligning grid items with justify-items

The `justify-items` property aligns grid items along the row axis. It sets the default alignment for all items in the grid.

                                

.grid-container {
  display: grid;
  justify-items: center;
}

Aligning items with align-items

The `align-items` property controls the alignment of grid items along the column axis.

                                

.grid-container {
  display: grid;
  align-items: start;
}

CSS Transitions

Basic transition syntax

CSS transitions provide a way to change property values smoothly over a specified duration. The `transition` property is shorthand for `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.

                                

.element {
  transition: background-color 0.5s ease-in-out;
}
/* Background color changes smoothly over 0.5 seconds */

Transitioning multiple properties

You can transition multiple properties by separating them with commas. Each property can have its own duration, timing function, and delay.

                                

.element {
  transition: background-color 0.5s ease-in-out, transform 0.3s ease-in;
}

Transition timing functions

The `transition-timing-function` property defines the speed curve of the transition. Common values include `ease`, `linear`, `ease-in`, `ease-out`, and `ease-in-out`.

                                

.element {
  transition-timing-function: ease-in;
}

Delay transitions with transition-delay

The `transition-delay` property specifies the delay before the transition starts. It can be set in seconds or milliseconds.

                                

.element {
  transition-delay: 0.2s;
}

Transition on hover

To create interactive effects, transitions are often used with pseudo-classes like `:hover`. This changes the property values when the user interacts with the element.

                                

.element {
  background-color: blue;
  transition: background-color 0.5s;
}
.element:hover {
  background-color: red;
}

Responsive Design

Media queries basics

Media queries apply CSS styles based on the device's characteristics, such as its width, height, or orientation. They are essential for creating responsive designs.

                                

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Using viewport units

Viewport units (`vw`, `vh`, `vmin`, `vmax`) are relative to the viewport size and can help create responsive designs that adapt to different screen sizes.

                                

.element {
  width: 50vw;
  height: 50vh;
}

Responsive typography with REM and EM units

Using `rem` and `em` units for font sizes ensures that text scales proportionally to the root font size or parent element, aiding in responsive typography.

                                

body {
  font-size: 16px;
}
h1 {
  font-size: 2rem;
}

Fluid layouts with % and flexbox

Percentage-based widths and flexbox help create fluid layouts that adjust to different screen sizes while maintaining their proportions.

                                

.container {
  display: flex;
  width: 100%;
}
.item {
  flex: 1;
}

Breakpoints for responsive design

Breakpoints are specific screen widths where the layout changes to provide an optimal viewing experience. Media queries are used to apply styles at these breakpoints.

                                

@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Programming Cheatsheets: Quick Reference for Productivity

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.

Online Training Q4 2024