Common CSS layout methods include float, Flex, and Grid.

Use float layouts if compatible with IE 9, flex and Grid layouts if not required. The Grid layout is more convenient when all you need is compatibility with the latest browsers.

Float layout

steps

  1. Add float:left and width to the child element

  2. Add Clearfix to the parent element

Rule of thumb

  • Leave some space, or leave the last one at width, or you can set a max-width.

  • There is no need to be responsive because there is no Internet Explorer on the phone and this layout is specifically for Internet Explorer.

  • There is a double margin bug in IE 6/7: Adding a margin to the left of a float element makes it double margin. Margin-left: 5px; margin-left: 5px; In other browsers, an automatic error message is not executed. Or add the display: inline – block

Flex layout

Container, the container

Make an element a Flex container

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

Change the flow direction of items (spindle)

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

Change the fold line

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

Spindle alignment

The default is the flex – start

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

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

Secondary alignment (default secondary is vertical)

The default is the flex – start

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

Multi-line content

The default is the flex – start

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

What properties does flex Item have

Add order to item

The default is 0

Negative -> 0 -> positive

Add flex-grow to item

The default is 0

How does flex-Shrink control get thinner

Are writtenflex-shrink: 0;To prevent thinning, default is 1

Fast shrinkage in the middle:

Flex-basis controls the base width

The default is auto

flex:flex-grow flex shrink flex-basis

If you want to abbreviate, you can only write three together

Align the self – custom align – items

The Grid layout

Use Flex for 1-d layout and Grid for 2-D layout

As the container

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

Rows and columns

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

Give each line a name

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

After the name, item can be set to a range, such as:

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

fr -freespace

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

Partition the grid – the template – areas

.item-a{ grid-area: header; }.item-b{ grid-area: main; }.item-c{ grid-area: sidebar; }.item{ grid-area: footer; }.container{ display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main mian . sidebar" "footer footer footer footer"; }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