Quick Guide to CSS Flex

CSS flex, or the Flexible Box Layout Module, is a layout system that allows you to create flexible and responsive layouts for your webpage. It allows you to specify how elements should be displayed in relation to their parent container, and how they should adjust to different screen sizes and devices.

Here is a simple guide to get started with CSS flex:

  • To create a flex container, you can use the display property with a value of flex on the parent element. For example:
.container {
     display: flex;
}

This will turn the element with class “container” into a flex container, and all of its direct children will become flex items.

  • You can use the flex-direction property to specify the direction in which the flex items are laid out. The possible values are row, row-reverse, column, and column-reverse. For example:
.container {
     display: flex;
     flex-direction: row; /* flex items will be arranged in a row */
}
  • You can use the justify-content property to specify how the flex items are aligned along the main axis (the direction specified by flex-direction). The possible values are flex-start, flex-end, center, space-between, and space-around. For example:
.container {
     display: flex;
     flex-direction: row;
     justify-content: space-between; /* flex items will be evenly spaced along the main axis */
}
  • You can use the align-items property to specify how the flex items are aligned along the cross axis (the axis perpendicular to the main axis). The possible values are flex-start, flex-end, center, baseline, and stretch. For example:
.container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center; /* flex items will be centered along the cross axis*/
}
  • You can use the flex-grow, flex-shrink, and flex-basis properties to specify how the flex items should adjust to the available space in the container. The flex-grow property specifies how much a flex item should grow relative to the other flex items, the flex-shrink property specifies how much a flex item should shrink relative to the other flex items, and the flex-basis property specifies the default size of the flex item before the remaining space is distributed. For example:
.item {
     flex-grow: 1; this flex item will grow to fill the remaining space
     flex-shrink: 0; //this flex item will not shrink</p>
     flex-basis: 200px; // this flex item will have a default size of 200 pixels
}
  • You can also use the align-self property on individual flex items to specify how they should align along the cross axis, overriding the value set by align-items on the parent container.

I hope this simple guide helps you get started with CSS flex and creates flexible and responsive layouts for your webpage!