CSS Getting Started Notes 3

---

CSS layout ideas and layout methods

i. There are three ways of CSS layout:

• The first is a fixed width layout

Width may not be fixed, usually in the main 960/1000/1024 px computer on

• The second is not fixed width layout

The main principles of the document by the layout of the main stream to the mobile phone , the
document flow has always been adaptive, no need to add extra style

• The third is responsive layout

It means that the width is fixed on the pc, and the width is not fixed on the phone, which is a mixed layout

ii. Two ideas of layout

• From small to large

Set the overall situation first, and then improve the small layout of each part (suitable for veterans)

• From small to large

Complete the small layout first, then combine into a large layout (suitable for newcomers)

iii. What attributes are needed for layout

Div + CSS layout, not necessarily with div, mainly with CSS,
you can use main, header, footer,nav, asideto replace div semantics.

iv. What CSS layout method is used?

First of all, ask yourself whether you need to be compatible with IE?

Need -> use floatlayout (left floating, fixed width, not responsive)

No need -> Only compatible with the latest browser? ----(Yes –>Use gridlayout)/(Not only, but also compatible with old phones –>Use flexlayout)

Float layout and flex layout use negative margin when necessary.

1. float layout

Not much use now, IE browsers have switched to Chromium kernel

1.1 float layout steps:

On the plus sub-elements float: leftandwidth

Add to the parent element to wrap the floating element inside. .clearfix

If there are only floating elements in an element, its height will be 0. If you want it to be adaptive, that is, to include all floating elements, then you need to clear its child elements. One method is called clearfix, which clears a non-floating ::after pseudo element.

 .clearfix::after{
    
    
 	content:''; /*内容为空*/
	display: block;
 	clear: both;
 }

Note: Generally, some space is left or the width is not set for the last one.

If you use a float layout, you don’t need to be responsive. This layout is for IE, and IE is basically not used on mobile phones.

Existing problem: IE 6/7 has double margin (add the margin to the left of the float, it will automatically double in IE 6/7)

Solution 1: You can halve the margin -> IE will recognize _margin-left

Solution two: add anotherdisplay: inline-block;

.选择器{
    
    
...
margin-left: 10px;
_marigin-left: 5px;
/*方法一：IE会识别_margin-left*/
}

2 Flex layout

The flex layout mainly refers to CSS tricks flex

• flex container

container (English translation "container") is generally used as a parent element

• flex items

The direct child elements of the container are generally called items (English translation of "items")

You can refer to the figure below, the purple is container, the orange is the itemsrelationship between parent and child elements

2.1 What are the styles of flex container

① display: flex; can make an element become a flex container

code show as below

.container {
    
    
  display: flex; 
  /* 或者是 inline-flex */
}

②Flex-direction changes the flow direction of items (main axis):

code show as below

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

rowFrom left to right, row-reversefrom right to left, columnfrom top to bottom, column-reversefrom bottom to top.

Similar to the following

③Whether to flex-wrap

By default, flexible items try to be placed on one line

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

nowrapDo not fold, wrapfold , fold wrap-reversefrom bottom to top

Similar to the following

④ Spindle alignment justify-content *

The default main axis is the horizontal axis

code show as below

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

flex-startRepresented by forward, flex-endit indicates lean back, centershowing Towards the center space-betweenrepresents the remaining space in the gap, space-aroundrepresented in the space around, space-evenlyrepresents the average release.

Similar to the following

⑤Align the secondary axis align-items

The default secondary axis is the vertical axis

code show as below

.container {
    
    
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretchRepresents (default) stretch to fill the container (still complying with the minimum width/maximum width), which flex-startmeans top alignment, flex-endmeans bottom alignment centermeans center alignment, baselinemeans word alignment

Similar to the following

⑥How to distribute align-content in multiple lines

seldom use it

code show as below

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

flex-startMeans above the container; flex-endmeans below the container; centermeans the middle of the container, stretchmeans that the line stretches to occupy the remaining space; space-betweenmeans that the items are evenly distributed, the first line is at the beginning of the container, and the last line is at the end of the container; space-aroundthat the items are evenly distributed around each line ; space-evenlyIndicates that the items are evenly distributed with equal space around;

Similar to the following

2.2 What are the attributes of flex item?

①order sort

Items can be sorted, the default order is 0, sorted from small to large, the same is true for columns

②flex-grow elastic growth (getting fat)

If all items are flex-grow set to 1, the remaining space in the container will be evenly distributed to all children. The acceptance ratio determines the space occupied by the project in the container. Negative numbers are invalid

.item {
    
    
  flex-grow: 4; /* default默认为 0 */
}

Similar to the following

③ flex-shrink control becomes thinner

The default is 1, everyone is thin together, generally write flex-shrink: 0; to prevent thinning. The width is not enough to shrink as written. Negative numbers are invalid.

.item {
    
    
  flex-shrink: 3; /* default 1 */
}

The shrinkage effect is as follows

• ④flex-basis controls the base width and
  distributes the space around the content

.item {
    
    
  flex-basis:  | auto; /* default auto */
}

If set to 0, the extra space around the content is not considered. If set to auto, the extra space will be allocated according to its flex-grow value.

⑤flex shorthand

You can combine flex-grow, flex-shrink and flex-basis in short form. The second and third parameters (flex-shrink and flex-basis) are optional. The default value is0 1 auto

.item {
    
    
 flex: flex-grow flex-shrink flex-basis;
}

⑥align-self

Add to a certain item, this item can stand alone

.item {
    
    
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  /*属性和align-items一样*/
}

3 Recommend fast learning methods

I still recommend two small games to learn flex layout and grid layout, which can be used quickly and more easily.

①Take the frog home-flex layout

https://flexboxfroggy.com/#zh-cn    take the frog home-flex layout

②Plant radish-Grid layout

https://cssgridgarden.com/#zh-cn    Growing Carrots-Grid Layout

I have already cleared the level

Bring the frog home-flex layout

Growing carrots-Grid layout

–continue

---

---

I am on my way to learn the front end from entry to soil. Every time you watch, it is your greatest encouragement to my learning journey, let's work hard together!

Welcome to leave your valuable comments.