Flex layout

Flex is a flexible layout.

The Flex layout provides a great deal of flexibility for the box model. Any container can be specified as a Flex layout by setting it:

.box{
display:flex;// Enable flex layout
display:inline-flex// Use Flex layout for inline elements
}
Copy the code

The float, clear, and vertical-align properties are disabled when using flex layout.

Flex – driection set the orientation of the project, the default is a row of flex – driection properties mainly include: the flex – driection: row | row – reverse | column | column – reverse

The arrangement effects are as follows:

The above arrangement can be achieved with the following code

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /* Horizontal, left aligned */
    flex-direction: row;
    /* Horizontal, right aligned */
    /*flex-direction: row-reverse; * /
    /* Vertical, top aligned */
    /*flex-direction: column; * /
    /* Vertical, bottom aligned */
    /*flex-direction: column-reverse; * /
    background: #999;
    width: 100%;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
</div>
Copy the code

Flex-wrap sets whether items are in a line. The default is NowRap

flex-wrap: wrap | nowrap | wrap-reverse

The arrangement effects are as follows:

A newline

Don’t wrap

The first row is down here

The above arrangement can be achieved with the following code

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    / * * / a new line
    /*flex-wrap: wrap; * /
    /* No line breaks, default */
    /*flex-wrap: nowrap; * /
    /* Newline, first line below */
    /*flex-wrap: wrap-reverse; * /
    background: #999;
    width: 100%;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
    <span>Hello 6</span>
    <span>Hello 7</span>
</div>
Copy the code

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap

The context-content attribute defines the alignment of the project on the main axis, with a default value of flex-start

The justify – content: flex – start | | flex – end center | space – between | space – around when set to the justify – content: flex – start, effect:

When set to context-content: flex-end:

When set to context-content: center, the effect is:

When set to context-content: space-between, the effect is as follows:

When set to context-content: space-around, the effect is:

The above arrangement can be achieved with the following code

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /* By default, items are left aligned */
    justify-content: flex-start;
    /* Align items right */
    /*justify-content: flex-end; * /
    /* Items are centered */
    /*justify-content: center; * /
    /* Align both ends of the project */
    /*justify-content: space-between; * /
    /* The spacing on both sides of each item is equal */
    /*justify-content: space-around; * /
    background: #999;
    width: 100%;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
    <span>Hello 6</span>
    <span>Hello 7</span>
</div>
Copy the code

The align-items property defines the alignment of items on the vertical axis. The default value is “Stretch”. This is suitable for items with different heights on the vertical axis

The align – items: flex – start | | flex – end center | baseline | stretch when set to align – items: flex – start, effect:

When set to align-items: flex-end:

When set to align-items: Center, the effect is:

If align-items: baseline is set to:

When align-items: stretch is set to:

The above arrangement can be achieved with the following code

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    /* Align the top of the vertical axis */
    /*align-items: flex-start; * /
    /* Align the bottom of the vertical axis */
    /*align-items: flex-end; * /
    /* Align the midpoint of the vertical axis */
    /*align-items: center; * /
    /* The baseline alignment of the first line of the project */
    /*align-items: baseline; * /
    /* The default alignment, if the item is not set to height or is set to auto, will take up the entire container height */
    align-items: stretch;
    background: #999;
    width: 100%;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
.box span:nth-of-type(2n){
    height: 80px;
    padding-top: 20px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
    <span>Hello 6</span>
    <span>Hello 7</span>
</div>
Copy the code

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. (I set the container’s flex-wrap property to wrap for better effect.)

align-content: flex-start | flex-end | center | space-between | space-around | stretch

When align-content: fspace-between is set to:

When align-content: flex-start is set to:

When align-content: stretch

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    /* Align with the top of the vertical axis */
    /*align-content: flex-start; * /
    /* Align with the bottom of the vertical axis */
    /*align-content: flex-end; * /
    /* align with the midpoint of the vertical axis */
    /*align-content: center; * /
    /* Align with both ends of the vertical axis */
    /*align-content: space-between; * /
    /* The spacing on both sides of each axis is equal */
    /*align-content: space-around; * /
    /* Default, axis takes up the entire cross axis default, */
    align-content: stretch;
    background: #999;
    width: 600px;
    height: 300px;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
    <span>Hello 6</span>
    <span>Hello 7</span>
</div>
Copy the code

Project attributes

1And the order2, flex - turns up3, flex - the shrink4, flex - basis5, flex6, the align - selfCopy the code

Order defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

Set the first order attribute to 10, the second order attribute to -1, and the fifth order attribute to -10

The following code can be directly copied and saved as AN HTML file to view the effect:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    background: #999;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
}
.box span:nth-of-type(1){
    order: 10;
}
.box span:nth-of-type(2){
    order: -1;
}
.box span:nth-of-type(5){
    order: -10;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
</div>
Copy the code

The flex-grow attribute defines the size of the project. It is used when the width of the parent element is greater than the sum of the child elements. It defines how the child element allocates the remaining width of the parent element.

Give the first child a flex-grow attribute of 1 and the second child a flex-grow attribute of 1. The remaining width of the parent element is divided into three equal parts and added to the first and second child elements as follows:

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    background: #999;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
    width: 50px;
}
.box span:nth-of-type(1){
    flex-grow: 1;
}
.box span:nth-of-type(2){
    flex-grow: 2;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
</div>
Copy the code

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.

If the flex-Shrink attribute is not set for a project, the default Flex-Shrink value for the project is 1, which is scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the flex-shrink attribute is 0 when space is insufficient.

The principle of flex-shrink is similar to that of flex-grow, and it is easy to understand one and the other.

4. The flex-basis property defines the amount of principal axis space that the project occupies before allocating extra space (default: auto, the original size of the project).

Note: If you set both the flex-basis and width property values to your project, flex-basis overrides the width value. For example, flex-basis: 80px; width:100px; The actual width of the project is 80px;

Flex properties

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto.

Align-self attribute

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

<style type="text/css">
.box{
    display: flex;
    display: -webkit-flex;
    background: #999;
    height: 300px;
    align-items: flex-start;
}
.box span{
    margin: 10px 10px;
    padding: 10px;
    background: #ff0;
}
.box span:nth-of-type(3){
    align-self: flex-end;
}
</style>
<div class="box">
    <span>Hello 1</span>
    <span>Hello 2</span>
    <span>Hello 3</span>
    <span>Hello 4</span>
    <span>Hello 5</span>
</div>
Copy the code

Reference:

Blog.csdn.net/qq_34648000…