Front three layout, float, Flex, grid introduction.

What is layout

Before we get to the big three layouts, what is layout

There are now two types of layout:

1. Fixed width layout, usually 960/1000/1024px width
2. Non-fixed width layout, mainly by the principle of document flow layout

There is also a responsive layout, which takes into account the layout of the mobile phone, fixed at the PC end, not fixed at the mobile end

Layout ideas:

1. Starting from the big to the small, fixing the big picture and then perfecting the small pieces is a technique used by the most experienced
2. From small to large, first complete a small part, and then combine into a large layout, novice recommended

Front commandments:

1. Never write the interface dead in layout. Never write width and height dead unless otherwise specified
2. When writing margin, padding, etc. in combination, do not write them together unless it is necessary. It is recommended to separate them, such as margin-top or padding-bottom.
3. Must have a design draft before starting to write a page, if there is no design draft and their own installation of X writing, that is in the pit of their own
4. If you do not have a design draft, draw your own design draft and write it with the approval of your boss
5. If a designer gives you a design draft and asks you to write for PC and mobile, “I will write a P for the draft”, ！！！！ Note that this is the bottom line, if you give in your 996 will start

How do you decide which layout to use

Deciding which layout to use should be based on whether the two points are compatible with IE9 and whether they are compatible with the latest view shown below

Float: Use float layout when you need to be compatible with Internet Explorer. You don’t need to worry about mobile when using float layout because no one on the phone is browsing it with Internet Explorer

Flex layout: Use Flex layout when Internet Explorer compatibility is not required and the latest browser compatibility is not required

Grid: Grid layout can be used when only the latest browsers are compatible

Use negative margins when necessary, as a reminder

A wave of advertising for Hungry Man valley, heh heh. Hungry Man valley official website

Float layout

1. Layout the element by changing the float: left/right value of the child element, adding width to the child element if necessary
2. Clearfix: after will be added to the parent element to clear the float.IE browse the document flow in the float layout, float, locate and clearfix details
   

   
   

Experience:

1. Experienced users will leave some space or leave the width of the last one unset
2. There is no need to be responsive because there is no Internet Explorer on the phone and this layout is specifically for Internet Explorer
3. IE 6/7 has a double margin bug, there are two solutions: one is the error, for IE 6/7 margin by half, the other is god to a stroke, then add a display: inline-block, why can be like this? You ask me, I ask who? That’s what they teach you. Experience
4. Add a header and a tail, and you’ll have all your PC page needs
5. Float is for idiots on mobile pages
6. Float requires the programmer to calculate its own width and is inflexible
7. Float is enough for dealing with IE

Practice:

1. Two-column layout with float (e.g., top bar)
2. Use float for a three-column layout (e.g. content area)
3. Use float for a four-column layout (e.g. navigation)
4. Use float for average layouts (such as product displays)

Flex layout

There are two things involved when using flex layout, container and items

Container: The parent element is Container. You can change the layout of items inside the parent element by styling it

Items: The child element in a Container is Items

The way to make an element into a Container is to make display: flex

Here’s how I changed the inner container by styling it

.container{/*or display: inline-flex (the difference is the same as block and inline-block), so that an element becomes a flex container */ display:flex; /* Change the direction of items */ flex-direction:row; /* Default left to right */ flex-direction:row-reverse; /* flex-direction:column; /* flex-direction:column-reverse; /* flex-direction:column-reverse; / / flex-wrap:nowrap; / / flex-wrap:nowrap; /* flex-wrap: wrap; /* flex-wrap: wrap; /* flex-wrap: wrap; /* Type from bottom to top, then fold */ * align the main axis */ justify-content: flex-start; /* Default style, from the beginning, as far back as possible */ justify-content: flex-end; /* From the back, as far back as possible */ justify-content: center; /* move as far as possible */ justify-content: space-around; /* put space around */ justify-content: space between; /* Put space all in the middle */ justify-content: space-instituted; /* * align */ align-items:stretch; /* Default style, default pull as long as the longest */ align-items:flex-start; /* align-items:flex-end; /* align */ align-content:flex-start; */ align-content:flex-end; */ align-content:center; */ align-content: stretch; */ align-content: space-between; */ align-around: space-around; /* Put extra space around */}Copy the code

Here’s what items look like

.item{/* order */ order:1; Flex-grow :1; flex-grow:1; flex-grow:1; */ * Flex-shrink controls how to shrink */ flex-shrink:0; /* When the page shrinks to squeeze the current item, I do not shrink, my brother element shrinks first */ * Controls the base width */ flex-basis:100px; Align-items */ align-self: flex-end; }Copy the code

Because there are too many attributes, I give some common ones here:

1. display: flex
2. flex-direction: row | column
3. flex-wrap: wrap
4. just-content: center I space- between
5. align-items: center

There is also a flex layout practice mini game, recommended to play through the game to help familiarize yourself with flex layout

Flexbox Froggy​flexboxfroggy.com

For details on the Flex layout, see CSS Tricks:

Css-tricks.com/snippets/cs…

css-tricks.com

The grid layout

For grid layout details, see CSS Tricks:

Css-tricks.com/snippets/cs…

css-tricks.com

The grid layout also has containers and items. The way to make a container a container is display:grid/inline-grid

When an element becomes a Grid container, it can be divided by two attributes, as shown below

When an element is partitioned, it becomes a grid, where each line is numbered. As shown in the figure above, the grid layout has too many specific styles.

The container {/ * make a thing of the Grid container * / display: the Grid | inline - Grid; /* Divide the area of a container into three rows and five columns */ /* The width of each row */ grid-template-columns: 40px 50px auto 50px 40px; /* The width of each column */ grid-template-rows: 50px 80px auto; / / grid-template-row: 1fr 1fr 1fr; / / grid-template-row: 1fr 1fr 1fr; / / grid-template-column: 1fr 1fr; / / grid-template-column: 1fr 1fr; /* gap */ grid-gap:12px; Grid-column-gap and grid-row-gap*/}. Items {/* Horizontal from the first line */ grid-row-start:1; / / grid-row-end:4; / / grid-row-end:4; / / grid-column-start:1; / / grid-column-start:1; / / grid-column-end:4; / / grid-column-end:4; Container {grid-template-areas: {header, aside, main, div, footer}}"header header header"
	"aside main ad"
	"footer footer footer"/* You can use it if you want. */ grid-area:header; */ grid-area:header; }Copy the code

Grid layout is one of the more advanced layouts that may be used in the future. This layout is simpler and can lower the threshold of the front-end, creating!! .

There is also a little game about grid layout properties to help us practice (I did it anyway, hey hey) :

Grid Garden​cssgridgarden.com