classification

  1. Fixed width layout: generally 960/1000/1024 px width

  2. Non-fixed width layout: Layout is based on the principle of document flow

  3. Responsive layout: fixed width on PC, variable width on mobile

Usage scenarios for various layouts

Float layout

Add float:left and width to the child element

Add.clearfix to the parent element

This layout does not need to be reactive and is specifically prepared for IE.

If there is a double marginmarginbug in IE 6/7, you can halve margin for IE 6/7. Or add display: inline-block.

Flex layout

Make an element a Flex container

.container{
    display: flex; /*or inline-flex*/
}
Copy the code

Change the flow direction of items (spindle)

  1. Flex-direction: row from left to right

  2. Flex-direction: row-reverse from right to left

  3. Flex-direction: column from top to bottom

  4. Flex-direction: column-reverse from bottom to top

Change the fold line

  1. Flex-wrap: nowrap Default, no line breaks, automatic indentation

  2. Flex-wrap: wrap a new line with the first line at the top

  3. Flex-wrap: wrap-reverse newline with the first line below

Spindle alignment

The default main axis is horizontal when flex-direction is not changed.

  1. Context-content: Flex-start is left-justified

  2. Context-content: Flex-end is justified right

  3. The justify - content: center center

  4. Context-content: space-between sides are aligned, with equal space between items

  5. Each project has equal space on both sides, so there is twice as much space between projects as between them

  6. Even-content: space between the ends of the space- instituted and projects

Align the secondary axis (vertical axis)

  1. Align-items: flex-start Top alignment

  2. Align-items: align the bottom of flex-end

  3. The align – items: center center

  4. Align-items: strech By default, if the item is set to height or Auto, it will fill the entire container height

Multi-line content

  1. Align-content: flex-start Start alignment

  2. Align-content: flex-end end alignment

  3. The align – content: center center

  4. The align – content: stretch

  5. Align-content: space-between The two ends are aligned and the spacing between axes is evenly distributed

  6. Align-content: space-around axis and border and axis to axis gap evenly distributed

Order attribute

The order attribute defines the order of items. The smaller the value is, the higher the value is. The default value is 0.

.item{
    order: <integer>;
}
Copy the code

The flex – turns up properties

The flex-grow property defines the scale of the project, which defaults to 0

If all items have attributes of 1, they divide the remaining space equally. If one item has attributes of 2 and the other items have attributes of 1, the former takes up twice as much space as the other items.

The flex – the shrink properties

Defines the scale to which a project shrinks. The default is 1. When space is insufficient, the project shrinks

The flex – the basis properties

Controls the base width. The default is Auto, the original size of the project.

Flex properties

The flex attribute is a short term for flex-grow, flex-shrink, and Flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

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

This property has two shortcut values: auto(1 1 auto) and None (0 0 auto).

It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

The align – self properties

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property.

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

The Grid layout

Become a container

.container{
    display: grid | inline-grid;
}
Copy the code

Rows and columns

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}
Copy the code

The set range

.item{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}
Copy the code

Equal parts

Give each item an attribute value. For example, if there are three items, give each item a value of 1FR. That is, the space is divided into three levels and divided among three items.

.container{
    grid-template-columns: 1fr 1fr 1fr;
Copy the code

partition

Name the grid area and the size of the space occupied by the corresponding project.

.container{
    width: 400px;
    height: 300px;
    border: 1px solid red;
    display: grid;
    grid-template-columns: 50px 50px auto 50px;
    grid-template-rows: auto;
    grid-template-areas:
        "header header header header"
        "main main . aside"
        "footer footer footer footer"
}
.header{
    grid-area: header;
    background: red;
}
.main{
    grid-area: main;
    background: blue;
}
.aside{
    grid-area: aside;
    background: yellow;
}
.footer{    grid-area: footer;
    background: grey;
}
Copy the code

Gap gap

.container{
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}
Copy the code