Table of contents
Flexbox
CSS Flexbox is a powerful layout module that provides a flexible way to arrange and distribute elements within a container. It offers a simplified and efficient way to create responsive and dynamic layouts. The main features of Flexbox include flexible box alignment, ordering, and distribution of space.
Here are the key properties and concepts of Flexbox:
display: flex
: This property is applied to the parent container to enable Flexbox behavior.flex-direction
: This property specifies the direction in which the flex items are laid out. It can have values likerow
(default),row-reverse
,column
, orcolumn-reverse
.justify-content
: This property defines how the flex items are distributed along the main axis of the container. It controls the alignment horizontally and can have values likeflex-start
,flex-end
,center
,space-between
,space-around
, orspace-evenly
.align-items
: This property controls the alignment of flex items along the cross axis (perpendicular to the main axis). It can have values likeflex-start
,flex-end
,center
,baseline
, orstretch
.flex
: This property is applied to individual flex items and defines their ability to grow, shrink, or remain fixed in size. It takes three values:flex-grow
,flex-shrink
, andflex-basis
. For example,flex: 1 0 auto
means the item can grow, won't shrink, and will use its content size as the basis.flex-shrink
: Theflex-shrink
property is used in Flexbox to specify how flex items should shrink when there is not enough space available in the flex container. It determines the ability of an item to decrease its size relative to other flex items.align-self
: This property allows you to override the alignment set byalign-items
for specific flex itemsflex-grow
: Theflex-grow
property is used in Flexbox to specify how flex items should grow and distribute available space within the flex container. It determines the ability of an item to increase its size relative to other flex items..flex-wrap
: This property specifies whether flex items should wrap onto multiple lines or stay on a single line. Values can benowrap
(default),wrap
, orwrap-reverse
.flex-flow
: This shorthand property combinesflex-direction
andflex-wrap
into a single declaration.
.
Here's an example of a basic Flexbox layout:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex: 1;
}
In this example, the .container
is the parent element with display: flex
, and the .item
elements are the flex items. The items will be horizontally centered (justify-content: center
) and vertically centered (align-items: center
). The flex: 1
property for the items allows them to expand and fill the available space equally.
By utilizing the various Flexbox properties, you can create versatile and responsive layouts with ease.