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, or the Flexible Box Layout, is a CSS layout model designed to make it easier to arrange elements in a container, even when their size is unknown or dynamic. By setting `display: flex` on a container, its child elements (known as flex items) can be aligned and spaced dynamically.
div {
display: flex;
}
The `justify-content` property controls the alignment of flex items along the main axis (horizontal by default). It can position items to the left, right, center, or distribute them evenly.
div {
display: flex;
justify-content: center; /* Centers the items horizontally */
}
div {
display: flex;
justify-content: space-between; /* Distributes items with space between them */
}
The `flex` property is a shorthand for setting `flex-grow`, `flex-shrink`, and `flex-basis` in one line. It defines how a flex item will grow, shrink, and the initial size it should have inside the flex container.
.item {
flex: 1 1 150px; /* Grow and shrink equally, start at 150px */
}
The `flex-direction` property specifies the direction in which flex items are placed in the flex container. It can be set to `row` (default), `row-reverse`, `column`, or `column-reverse`.
div {
display: flex;
flex-direction: column; /* Stacks items vertically */
}
The `align-content` property adjusts the spacing between lines when there are multiple rows of flex items. It only affects flex containers with `flex-wrap` enabled and multiple lines of items.
div {
display: flex;
flex-wrap: wrap;
align-content: space-around; /* Distributes lines evenly with space around them */
}
The `flex-grow` property defines how much a flex item should grow relative to the rest of the flex items in the container. A higher value means the item will take up more space.
.item {
flex-grow: 2; /* This item will grow twice as much as others with flex-grow: 1 */
}
The `flex-shrink` property defines how much a flex item should shrink relative to the rest of the flex items when there isn't enough space in the flex container.
.item {
flex-shrink: 2; /* This item will shrink twice as much as others with flex-shrink: 1 */
}
`flex-basis` specifies the initial size of a flex item before space distribution occurs. It can be set to a specific size (e.g., `100px`) or auto to use the item's content size.
.item {
flex-basis: 200px; /* Sets the initial width to 200px */
}
`flex-flow` is a shorthand property for setting both `flex-direction` and `flex-wrap` in one line.
.container {
display: flex;
flex-flow: row wrap; /* Flex items in a row that wraps onto new lines if needed */
}
`display: inline-flex` sets an element as a flex container, similar to `display: flex`, but the container itself behaves like an inline element, flowing within text and other elements.
span {
display: inline-flex;
}
`align-items` aligns flex items along the cross axis (vertical by default). Common values are `stretch` (default), `flex-start`, `flex-end`, and `center`.
.container {
display: flex;
align-items: center; /* Aligns items vertically in the middle */
}
`flex-wrap` specifies whether flex items should wrap onto multiple lines if there's not enough space. It can be set to `nowrap` (default), `wrap`, or `wrap-reverse`.
div {
display: flex;
flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
}
CSS transitions allow you to change property values smoothly over a specified duration. They can be used to animate changes like color, size, and position of elements.
div {
transition: background-color 0.5s ease-in-out;
}
div:hover {
background-color: blue;
}
A CSS transition is defined by four main components: `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.
/* Shorthand for transitioning the background-color over 0.5 seconds with an ease-in-out timing function */
div {
transition: background-color 0.5s ease-in-out;
}
`transition-duration` specifies how long the transition should take to complete. If not set, the default value is `0s`, meaning no animation will occur.
div {
transition-duration: 1s; /* 1-second duration */
}
`transition-timing-function` describes the speed curve of the transition effect. Common values include `ease`, `ease-in`, `ease-out`, `ease-in-out`, and `linear`.
div {
transition-timing-function: ease-in-out; /* Smooth acceleration and deceleration */
}
`transition-delay` sets a delay before the transition starts. It can be specified in seconds (s) or milliseconds (ms).
div {
transition-delay: 0.3s; /* 0.3-second delay before the transition starts */
}
You can trigger transitions on multiple properties simultaneously by listing them with commas.
div {
transition: background-color 0.5s, width 1s; /* Transitions both background-color and width */
}
The value `all` for `transition-property` causes every animatable property to transition.
div {
transition: all 0.5s ease-in-out; /* Applies transition to all animatable properties */
}
The `transition` shorthand allows you to specify multiple transition properties in one line, including `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.
button {
transition: opacity 0.4s ease-in-out 0.2s; /* Opacity transitions over 0.4s with a 0.2s delay */
}
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