CSS floating layout gives up float and embraces flex (detailed explanation)

blog description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

Description

When writing the front-end code, write a row of float: left, float: right, and finally a clear: both; sometimes once you forget to clear the float, then the page will be blurred.

It is the loss of float, the code is written a lot, and it is easy to lose. So I looked away and saw flex.

Flex layout

Flex is called flexible layout, and it provides maximum flexibility for box models. Any container can be designated as a Flex layout. Elements that use flex are called flex containers. The sub-elements inside are called projects, and the project's float , clear and vertical-align attributes will be invalid.

// Flex 布局
.box{
  display: flex;
}


// 行内元素使用 Flex 布局
.box{
  display: inline-flex;
}


// Webkit 内核的浏览器，必须加上`-webkit`前缀
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

Containers and items

Now that it is divided into containers and projects, it is roughly the following relationship, mainly to record the container properties and project properties.

Container properties

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction property

Determine the direction of the main axis (that is, the direction in which the items are arranged)

Value: row (default) | row-reverse | column | column-reverse

row (default value): The main axis is in the horizontal direction, and the starting point is at the left end.
row-reverse: The main axis is in the horizontal direction, and the starting point is at the right end.
column: The main axis is in the vertical direction, and the starting point is at the upper edge.
column-reverse: The main axis is in the vertical direction, and the starting point is at the bottom edge.

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap attributes

Whether the control item wraps

Value: nowrap (default) | wrap | wrap-reverse

nowrap (default): Do not wrap, divide the container equally.
wrap: wrap, items will not be divided into the width of the container, but arranged according to their own width, if they exceed the width of the parent container, they will wrap naturally.
wrap-reverse: The opposite of the wrap effect.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow properties

The flex-flow property is a short form of the flex-direction property and the flex-wrap property, and the default value is row nowrap.

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content attribute

Control the alignment of items on the horizontal axis

flex-start (default): left-justified.
center: centered.
flex-end: align right.
space-between: Align the left and right ends, that is, the items on the left and right sides are close to the container, and the space between the items is equal.
space-around: The space between items is twice the space between the left and right items and the container.
space-evenly: The space between the items is equal to the space between the items and the container.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items attribute

Arrangement of control items on the vertical axis

Value: flex-start | flex-end | center | baseline | stretch (default)

flex-start: align the starting point of the cross axis.
flex-end: align the end points of the cross axis.
center: The center point of the cross axis is aligned.
baseline: The baseline alignment of the first line of text of the project.
stretch (default): If the project has no height set or set to auto, it will occupy the height of the entire container.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content attribute

Control the alignment of multi-line items, if the item has only one line, it will not work

flex-start: align with the starting point of the cross axis.
flex-end: align with the end of the cross axis.
center: Align with the midpoint of the cross axis.
Space-between: align with both ends of the cross axis, and the space between the axes is evenly distributed.
Space-around: The space on both sides of each axis is equal. Therefore, the interval between the axis is twice as large as the interval between the axis and the frame.
stretch (default): The axis occupies the entire cross axis.
space-evenly: The space between the items is equal to the space between the items and the container.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly;
}

Project properties

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order attribute

The attributes define the order of the items. The smaller the value, the higher the arrangement, and the default is 0.

.item {
  order: <integer>;
}

flex-grow properties

The magnification ratio of the definition item of nature, the default is 0 , that is, if there is remaining space, it will not be magnified.

.item {  flex-grow: <number>; /* default 0 */}

flex-shrink properties

flex-shrink attribute defines the reduction ratio of the project, and the default is 1, that is, if the space is insufficient, the project will be reduced. flex-shrink attribute is 0, the other items are all 1, and when the space is insufficient, the flex-shrink will not shrink.

.item {  flex-shrink: <number>; /* default 1 */}

flex-basis properties

When the default is auto, the item will keep the default width, or use width as its own width

If flex-basis is set, it will override the widtn property.

.item {  flex-basis: <length> | auto; /* default auto */}

flex properties

flex attribute flex-basis flex-grow , flex-shrink and 060f03239e0360, and the default value is 0 1 auto . The last two attributes are optional.

.item {  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

align-self attribute

align-self attribute allows a single item to have a different alignment with other items, and can override the align-items attribute. The default value is auto , which means inherit the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch .

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

thanks

Universal network
Novice Tutorial
Ruan Yifeng's flex layout
And the hardworking self, personal blog , GitHub

CSS floating layout gives up float and embraces flex (detailed explanation)