Detailed teaching of CSS Flex layout

Flex Layout is a powerful CSS layout model that helps us create responsive and flexible layouts more easily. This article will introduce the basic concepts, properties and sample codes of Flex layout.

What is flex layout?

Flex Layout is a container and item based layout model. A container is the parent element to which the flex layout is applied, while an item is the child element within the container. By setting the properties of the container, we can control the arrangement, alignment and space allocation of items within the container.

How to use flex layout?

To use flex layout, you first need to displayset the container's property to flexor inline-flex. This will make the container a flex container and enable flex layout.

.container {
    
    
  display: flex;
}

Properties of flex containers

Here are some commonly used flex container properties:

flex-direction: Specifies the arrangement direction of the items. The default value is row, indicating a horizontal arrangement. Other possible values are column(align vertically), row-reverse(align horizontally reverse), and column-reverse(align vertically reverse).

.container {
    
    
  flex-direction: row;
}

flex-wrap: Specifies whether the item wraps. The default value is nowrap, which means no newline. Other possible values are wrap(newline) and wrap-reverse(reverse newline).

.container {
    
    
  flex-wrap: wrap;
}

justify-content: Specifies the alignment of the item on the main axis. The default is flex-start, which means align left. Other possible values are flex-end(align right), center(align center), space-between(justify, with equal spacing between items), and space-around(equal spacing on both sides of each item).

.container {
    
    
  justify-content: center;
}

align-items: Specifies the alignment of the item on the cross axis. The default is stretch, which means Stretch Fill. Other possible values are flex-start(align top), flex-end(align bottom), and center(align center).

.container {
    
    
  align-items: center;
}

align-content: Specifies the alignment of multi-line items on the cross axis. The default is stretch, which means Stretch Fill. Other possible values are flex-start(justify top), flex-end(justify bottom), center(justify center), space-between(justify with equal space between lines), and space-around(equal space on both sides of each line).

.container {
    
    
  align-content: center;
}

Properties of Flex Items

Here are some commonly used flex item properties:

flex-grow: Specifies the magnification ratio of the item. The default value is 0, meaning no zoom in. When set to a positive number, the item will be scaled up.

.item {
    
    
  flex-grow: 1;
}

flex-shrink: Specifies the reduction ratio of the item. The default value is 1, which means it can be zoomed out. 0When set to , the item will not be scaled down.

.item {
    
    
  flex-shrink: 0;
}

flex-basis: Specifies the initial size of the item. The default value is auto, indicating that the size is automatically calculated based on the item content. Can be set to a specific value or a percentage.

.item {
    
    
  flex-basis: 50%;
}

flex: is the short form of flex-grow, flex-shrinkand flex-basis. The default value is 0 1 auto.

.item {
    
    
  flex: 1 0 50%;
}

align-self: Specifies the alignment of individual items on the cross axis, overriding the container's align-itemsproperties.

.item {
    
    
  align-self: flex-start;
}

sample code

Here is an example of a simple flex layout:

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

.container {
    
    
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
    
    
  flex: 1 0 25%;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

In this example, the container is set to a flex layout, and the items are arranged horizontally and centered. Each item has a size of 25% of the container's width, a height of 100px, a gray background color, and a 10px gap between them.

in conclusion

Flex Layout is a powerful CSS layout model that helps us create responsive and flexible layouts more easily. By setting properties for containers and items, we can control how items are arranged, aligned, and spaced. Hope this article helps you understand and use Flex layout!