A, layout,

1, classification,

  • Fixed width layout, usually 960/1000/1024px
  • Fixed width layout, mainly depends on the principle of document flow
  • Responsive layout, fixed width on PC, variable width on mobile

2, train of thought

  • From big to small

  • From small to big: Rookie recommendations

3. Layout routines

Float layout

1, steps,

  • Child element plus float:left and width

  • Add.clearfix to the parent element

    .clearfix::after {
  content:' ';
  display:block;
  clear: both;
}
Copy the code

2, tips,

  • Those with experience will leave some space or leave width off the last one

  • There’s no need to do a special response, because the phone doesn’t have Internet Explorer, so this is for Internet Explorer

  • Ie6/7 has a double margin bug, the solution is:

    1. Margin halved for IE6/7

    2. Add a display:inline-block

  • (box-sizing:border-box) (border: outline) (box-sizing:border-box) (border: outline

3, the practice

Different layouts:

  • To lay out (a top bar, for example) in two columns with float

  • Use float for a three-column layout (e.g. content area)

  • Use float for a four-column layout (e.g. navigation)

  • Use float for average layouts (such as product displays)

Flex layout

1. Container style

1.1 Make an element into a Flex container

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

1.2 Change the flow direction of items (spindle)

.container {
    flex-direction:row | row-reverse | column | column-reverse; 
}
Copy the code

1.3 Whether to Fold a line

.container {
    flex-wrap:nowrap | wrap | wrap-reverse;
}
Copy the code

1.4 Spindle alignment

The default main axis is horizontal unless flex-direction is changed

.container {
    justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly
}
Copy the code

1.5 Alignment of secondary axis

The default secondary axis is the vertical axis

.container {
    align-items:stretch | flex-start | flex-end | center | baseline
}
Copy the code

Multi-line content distribution (less used)

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

Copy the code

2. Style of item

2.1 the order

The default order is 0. If order is set, the order is from smallest to largest

2.2 the flex – turns up

Allocate space, how much space each item gets

2.3 the flex – the shrink

When running out of space, each item is scaled by 1 by default

Generally write flex – the shrink: 0;

2.4 the flex – basis

Control reference width

Abbreviations:

  • flex: flex-grow; flexshrink; flex-basis

2.5 the align – self

The alignment of an item alone on the vertical axis

3, the practice

  • Flex does a two-column layout

  • Flex does a three-column layout

  • Flex does a four-column layout

  • Flex does average layout

  • Flex is used in combination for more complex layouts

tips:

  1. Do not overwrite width and height

  2. With the min – width/min – height/Max – width/Max – height

  3. Flex does almost everything you need

  4. Flex collocation margin – XXX: auto

Fourth, grid layout

The grid lends itself to irregular layouts

Make an element a Grid container

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

2. Rows and columns

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

You can also give each thread a name:

.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto
[col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line]
auto [last-line];
} 
Copy the code

3. Free-space Average setting space

.container {
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    /* Set two rows and three columns */
}
Copy the code

4. Set the item range

.item-a {
    grid-column-start:2;
    grrd-column-end:five;
    grid-row-start:row1-start;
    grid-row-end:3;
}
Copy the code

5, the grid – the template – areas

.container {
    display:grid;
    grid-template-columns:50px 50px 50px 50px;
    grid-template-rows:auto;
    grid-template-area:
        "header header header header"
        "main main .sidebar"
        "footer footer footer footer"
}
.item-a {
    grid-area:header;
}
.item-b {
    grid-area:main;
}
.item-c {
    grid-area:sidebar;
}
.item-d {
    grid-area:footer;
}
Copy the code

6, the grid 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