IT Course CSS Basics 032_Flexbox Layout

Flexbox Layout

For a long time, the only reliable cross-browser compatible tools for creating CSS layouts were float and position. These two tools work well in most cases, but in certain aspects they have limitations that make it difficult to complete tasks.

The following simple layout requirements are difficult or impossible to achieve conveniently and flexibly with these tools (float and position):

• Vertically centering a block of content inside its parent.
• Making all children of a container take up an equal amount of available width/height, regardless of how much width/height is available.
• Making all columns in a multi-column layout adopt the same height, even if they contain different amounts of content.

CSS Flexbox is a powerful layout tool in CSS that can be used to create various flexible layouts. To master CSS Flexbox, you need to understand the following concepts:

• Flex container: Flexbox layout consists of flex containers and flex items. A flex container is a container that places flex items into the flex layout. A flex container can be any element, but usually a div element is used.
• Flex item: A flex item is an element placed in a flex container. A flex item can be any element, but usually a div element is used.
• Main axis: The main axis is the horizontal or vertical direction of elements in the flex layout.
• Cross axis: The cross axis is the vertical or horizontal direction of elements in the flex layout.

Flex Container Properties

Flex containers have the following properties to control flex layout:

• display: Sets the display mode of the flex container. The flex container must be set to display: flex or display: inline-flex to use flex layout.
• flex-direction: Sets the main axis direction of the flex layout. Values can be flex-start align to main axis start, flex-end align to main axis end, row horizontal arrangement on main axis, row-reverse reverse horizontal arrangement on main axis, column vertical arrangement on main axis, column-reverse reverse vertical arrangement on main axis.
• flex-wrap: Controls whether items in the flex container wrap. nowrap default value, no wrapping, wrap wrapping, wrap-reverse reverse wrapping.
• flex-flow: Shorthand for flex-direction and flex-wrap, two values corresponding to flex-direction and flex-wrap respectively.
• justify-content: Sets the alignment of flex items on the main axis in the flex container. Values can be flex-start align to main axis start, flex-end align to main axis end, center center alignment on main axis, space-between evenly distributed on main axis (container edges aligned), space-around evenly distributed on main axis (equal spacing between items), or space-evenly evenly distributed on main axis (including equal spacing on both ends).
• align-items: Sets the alignment of flex items on the cross axis in the flex container. Values can be flex-start align to cross axis start, flex-end align to cross axis end, center center alignment on cross axis, stretch default value, or baseline align to first line text baseline on cross axis. Only affects child items of the flex container.
• align-content: Like align-items, it’s a property for controlling the alignment of child items on the cross axis, only effective when the flex container has multiple axis lines (in multi-row or multi-column situations).

Flex Item Properties

Flex items have the following properties to control the layout of flex items in the flex layout:

• flex-grow: Sets the flex item’s expansion ratio on the main axis. Values can be floating point numbers between 0 and 1.
• flex-shrink: Sets the flex item’s shrink ratio on the main axis. Values can be floating point numbers between 0 and 1.
• flex-basis: Sets the flex item’s default width or height on the main axis. Values can be length values, percentage values, or auto.
• order: Sets the flex item’s order on the main axis. Values can be integers between 1 and 65535.

Example:

1
/* Flex container styles */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* Main axis direction is horizontal */
5
    justify-content: space-around; /* Alignment on main axis */
6
    align-items: center; /* Alignment on cross axis */
7
    height: 200px; /* Set container height */
8
    border: 2px solid #333; /* Add border for better visualization */
9
}
10
/* Flex item styles */
11
.flex-item {
12
    flex: 1; /* Equal distribution of main axis space */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Flex container -->
2
<div class="flex-container">
3
    <!-- Flex item 1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Flex item 2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Flex item 3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

Effect: