Remanufacturing, arrangement of css conventional layout system -- Summary of resumption after actual development

Write before:

Before understanding css layout, let's first understand two small concepts, which I think will help you!

Block level element: display: bloom; Occupy one line, and the next element will wrap automatically, such as div;

Inline element: display:inline; The element has no height or width, and its size is changed according to the content in the element, such as span, a label, etc;

Inline block: display: inline block; Making inline elements have block level element characteristics and block level elements have inline element characteristics;

1. Basic css layout

1.1 position positioning

position is used to specify the type of positioning method for elements such as div.

It contains five positioning methods: static, relative, fixed, absolute and sticky. When these positioning methods are added after position, we can use top, right, left and bottom to change the position of elements~

1.1.0 running effect diagram of example code

[external link picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-xn25pgjp-1626658206866)( https://i.loli.net/2021/07/18/Bz95UFDrn4VAm6Y.png )]

1.1.1 static positioning mode

Static positioning is the default of the browser. It makes no difference whether it is written or not. top, right, left and bottom do not work.

div.static {
    position: static;
    border: 3px solid #73AD21;
    top: 50px;  /*Demonstration: this sentence doesn't work and can be deleted*/
    left: 10px; /*Demonstration: this sentence doesn't work and can be deleted*/
}

1.1.2 fixed positioning mode

Fixed positioning. The position of the element is fixed relative to the browser (that is, the browser window you can see). No matter how you slide the window, it remains there.
Can overlap with other elements. (commonly used to fix the position of the navigation bar)

div.fixed_1 {
    position: fixed;
    border: 3px solid #111111;
    width: 200px;
    height: 60px;
    top: 300px;
    left: 50px;
}

div.fixed_2 {
    position: fixed;
    border: 3px solid #44f895;
    width: 200px;
    height: 60px;
    top: 300px;
    left: 260px;
}

div.fixed_3 {
    position: fixed;
    border: 3px solid #7a5e5e;
    background-color: #ebaaaa;
    width: 200px;
    height: 60px;
    top: 310px;
    left: 360px;
}

1.1.3 relative positioning mode

Relative positioning: move relative to the original position of the element, and the original position still exists (usually wrapped with absolute absolute positioning).

div.relative {
    position: relative;
    border: 3px solid #9cf0c2;
    width: 200px;
    height: 60px;
}

1.1.4 absolute positioning mode

Absolute positioning, which is relative according to the elements wrapped in the outer layer. Left or right. If there is no outside, it is the html element, the largest one. (pithy formula: the son never sees the father.).

div.absolute {
    position: absolute;
    background-color: #9cf0c2;
    border: #29c9c9;
    width: 150px;
    height: 30px;
    top: 20px;
}

1.1.5 sticky positioning mode

Sticky positioning is similar to fixed positioning, but it is different. It can slide freely at the beginning. When it reaches a certain position, it will not move there. First slide freely to a certain position and fix it there.

div.sticky {
    position: -webkit-sticky; // Safari compatible 
    position: sticky;
    top: 20px; /* To the top 20px position */
    background-color: #29c9c9;
    border: 2px solid #73AD21;
}

1.1.6 example source code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>position Positioning use</title>
</head>

<body>
    <div style="height: 2000px;">
        <!-- static location -->
        <div class="static">This is static location</div>
        <!-- fixed location -->
        <div class="fixed_1">fixed Block 1</div>
        <div class="fixed_2">fixed Block 2</div>
        <div class="fixed_3">fixed Block 3</div>
        <!-- relative location -->
        <div class="relative">
            relative location
            <!-- absolute location -->
            <div class="absolute">absolute location</div>
        </div>
        <!-- sticky location -->
        <div class="sticky">This is sticky location</div>

    </div>
</body>

</html>

1.2 float positioning

1.2.0 running effect diagram of example code

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-7htzmugk-1626658206872)( https://i.loli.net/2021/07/18/KZYwsaxcID1COqM.png )]

1.2.1 detailed explanation of float

What is float positioning? Floating elements are separated from the document flow (for example, if we normally put a div in the page, there is a document flow, which will have a position. After it becomes float positioning, it will float, and the original position will not be occupied. If we put other div, it will be arranged normally from ignoring the position of float), Space is released (it used to occupy this position, then float, float, and this position is not occupied).

Clear: both: because the float is floating, this position is empty, and clear: both will clear the float and default to the normal document flow, so that the subsequent elements can be arranged normally (you can experience it in the code).

1.2.2 example source code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css float</title>
        <style>
            div.main{
                width: 1000px;
                height: 500px;
                background-color: aquamarine;
            }
            div.child{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
                margin: 5px;
            }
			// Clear float
            div.clear{
                height: 20px;
                border: 2px solid black;
                clear: both;
            }
        </style>
    </head>

    <body>
        <!-- float -->
        <div class="main">
            <div class="child"></div>
            <div class="child"></div>
            <div class="clear"></div>
        </div>
    </body>
</html>

2 layout commonly used in development

2.1 flex layout

A responsive layout, what is responsive? You can zoom in and out as the browser window size, and the layout elements zoom in and out accordingly.

See the explanation in Section III below for specific analysis.

2.2 antd grid layout

When we use ant design component development, we must use its own layout mode.

Please refer to the introduction on ant design's official website: https://ant.design/components/grid-cn/

2.3 grid layout

If flex is a one-dimensional layout, grid is a two-dimensional layout. More advanced, it has rows and columns. Flex has only rows. It is often used for layout with a fixed number of elements;

You can refer to Ruan Yifeng's Weblog - CSS Grid grid layout tutorial: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

3. Detailed explanation of flex layout

3.1 what is flex layout

Before the Flexbox layout module, there were four layout modes available:

Block, used for parts (sections) in web pages
Inline for text
Tables for 2D table data
Positioning, used for the explicit location of elements

The elastic frame layout module makes it easier to design a flexible and responsive layout structure without floating or positioning.

3.2 summary of tutorial documents

3.2.1 basic concepts

Containers and properties

[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-z1bgm4dl-1626658206875)( https://i.loli.net/2021/07/17/VUMXTN9GtCqw4Li.png )]

Elements with Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, called Flex items, or "projects".

By default, the container has two axes: the horizontal main axis and the vertical cross axis.

3.2.2 container properties

Containers often have six properties

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.2.2.1 flex-direction

The flex direction property determines the direction of the spindle (that is, the arrangement direction of the items).

.flex-container {
    display: flex;
    flex-direction: row(default) | row-reverse | column | column-reverse;
}

It is used to control the arrangement direction and order of items. The default is row, that is, horizontal arrangement. The arrangement order of items is positive order 1-2-3-4; Row reverse is arranged horizontally, but the order of items is in reverse order 4-3-2-1.

column and row are arranged vertically in opposite order. The sequence of items is positive order 1-2-3. column reverse is arranged vertically, and the sequence of items is reverse order 3-2-1.

3.2.2.2 flex wrap attribute

It is used to control whether the item breaks a line. nowrap means no line break.

.flex-container {    display: flex;   	flex-wrap: nowrap(default) | wrap | wrap-reverse;}

nowrap means that without line breaks, items will always be arranged in the first row of the container. No matter how many items there are, they will only be crowded in the first row.

wrap indicates automatic line feed. When the items are not arranged in the first line, it will automatically switch to the next line.

Wrap reverse is also an automatic line feed, but the difference is that it starts from the bottom (we started from the top before).

3.2.2.3 flex flow attribute

The flex flow attribute is a short form of the flex direction attribute and the flex wrap attribute. The default value is row nowrap (arranged horizontally without line breaks).

.flex-container {  flex-flow: <flex-direction> || <flex-wrap>;}

3.2.2.4 justify content attribute

Yo, often used, easy to use. The justify content attribute defines the alignment of the item on the main axis (we often use it when we want to center the item in the container).

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

Here, the horizontal axis is regarded as the main axis. The meanings of constant values are as follows:

Flex start (default): align left
Flex end: right justified
center: center
Space between: both ends are aligned, and the spacing between items is equal.
Space around: the space on both sides of each item is equal. Therefore, the interval between items is twice as large as that between items and borders.

3.2.2.5 align items attribute

Oh, this is also commonly used. It works well! The align items property defines how items are aligned on the cross axis.

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

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-mcez1kgt-1626658206898)( https://i.loli.net/2021/07/18/hmOjQCrxzEHiaBD.png )]

Here, the vertical axis is regarded as the cross axis. The meanings of constant values are as follows:

Flex start: align the start point of the cross axis.
Flex end: align the ends of the cross axes.
center: align the midpoint of the cross axis.
Baseline: the baseline alignment of the first line of text of the project.
stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container.

3.2.2.6 align content attribute

The align content attribute defines the alignment of multiple axes. This property has no effect if the project has only one axis.

[external link picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-j4ga1gkd-1626658206902)( https://i.loli.net/2021/07/18/XiVnew5CumD7ytF.png )]

The meanings of constant values are as follows:

Flex start: align with the start point of the cross axis.
Flex end: align with the end of the cross axis.
center: align with the midpoint of the cross axis.
Space between: align with both ends of the cross axis, and the spacing between the axes is evenly distributed.
Space around: the spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the frame.
stretch (default): the axis occupies the entire cross axis.

3.2.3 project attributes

Previously, we introduced the attributes written on the container. After writing, they will act on the item arrangement layout style in the container. Project properties are written on the project. In other words, the item attribute is equivalent to the li in ul. Write the attribute for li.

Because I don't often use it here, I'll simply remember it. For details, please refer to the reference article at the end of this article.

The writeable attributes of the project are as follows:

Order defines the order of items. The smaller the value, the higher the arrangement. The default value is 0.
Flex growth specifies how much a flex project will grow relative to other flex projects.
Flex shrink specifies how much a flex item will shrink relative to other flex items.
Flex basis specifies the initial length of the flex project.
Flex is a shorthand for the flex growth, flex shrink, and flex basis attributes.
Align self specifies the alignment of the selected items in the elastic container. The default alignment set by the align items property of the container will be overridden.

3.3 flex layout application

3.3.0 running effect diagram of example code

3.3.1 example HTML source code

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>flex layout</title>  <style>    .flex-container {      display: flex;      flex-direction: row;      flex-wrap: wrap;      background-color: DodgerBlue;    }    /* Select parent element style yes All < div > elements of flex container */    .flex-container>div {      display: flex;      justify-content: center;      align-items: center;      background-color: #f1f1f1;      width: 100px;      height: 80px;      margin: 10px;    }    .flex-container>div>div {      background-color: yellowgreen;      width: 50px;      height: 50px;      line-height: 50px;      text-align: center;      font-size: 30px;    }  </style></head><body>  <div class="flex-container">    <div>      <div>1</div>    </div>    <div>      <div>2</div>    </div>    <div>      <div>3</div>    </div>    <div>      <div>4</div>    </div>  </div></body></html>

4 finally

4.1 reference

w3school Flexbox layout module https://www.w3school.com.cn/css/css3_flexbox.asp

An article to understand flex layout https://www.cnblogs.com/echolun/p/11299460.html

Flex layout tutorial: Grammar https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

4.2 notes

***

Because of limited personal skills, if you find errors or questions, you are welcome to point out or give advice! Thank you very much!

Personal blog website: https://zhangqiang.hk.cn

Welcome to join the blogger's front-end learning qq exchange group: 706947563, focus on front-end development and learn and progress together!

Keywords: Front-end css

Added by Chris Powell on Sun, 16 Jan 2022 19:39:06 +0200

Programming VIP

Remanufacturing, arrangement of css conventional layout system -- Summary of resumption after actual development

Remanufacturing, arrangement of css conventional layout system -- Summary of resumption after actual development

1. Basic css layout

1.1 position positioning

1.1.0 running effect diagram of example code

1.1.1 static positioning mode

1.1.2 fixed positioning mode

1.1.3 relative positioning mode

1.1.4 absolute positioning mode

1.1.5 sticky positioning mode

1.1.6 example source code

1.2 float positioning

1.2.0 running effect diagram of example code

1.2.1 detailed explanation of float

1.2.2 example source code

2 layout commonly used in development

2.1 flex layout

2.2 antd grid layout

2.3 grid layout

3. Detailed explanation of flex layout

3.1 what is flex layout

3.2 summary of tutorial documents

3.2.1 basic concepts

3.2.2 container properties

3.2.2.1 flex-direction

3.2.2.2 flex wrap attribute

3.2.2.3 flex flow attribute

3.2.2.4 justify content attribute

3.2.2.5 align items attribute

3.2.2.6 align content attribute

3.2.3 project attributes

3.3 flex layout application

3.3.0 running effect diagram of example code

3.3.1 example HTML source code

4 finally

4.1 reference

4.2 notes

Popular Keywords