Write in front:

Before getting into CSS layouts, let’s look at two small concepts that I think will help you!

Block-level elements: display:bloak; Occupy a row and wrap the next element, such as div, etc.

Inline elements: display:inline; Elements have no height or width, but change size according to the contents of the element, such as span, a tag, etc.

Inline blocks: display:inline-bloak; Make the inline element have the block-level element characteristic, make the block-level element have the inline element characteristic;

1 basic CSS layout

1.1 the position location

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

It contains static, relative, fixed, absolute, sticky these five positioning methods, when the position after adding these several positioning methods, we can use top, right, left, bottom on the element position change operation ~ ~

1.1.0 Example code running renderings

1.1.1 Static location mode

Static positioning, the browser’s default, makes no difference. Top, right, left, and bottom don’t work.

div.static { position: static; border: 3px solid #73AD21; top: 50px; /* left: 10px; /* left: 10px; /* * * * * * * * * * * *Copy the code

1.1.2 Fixed positioning

Fixed position: The element’s position is fixed relative to the browser (that is, the browser window you can see), no matter how you slide the window, it stays there. You can overlap with other elements. (Often used to fix navigation bar position)

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;
}

Copy the code

1.1.3 Relative positioning mode

Relative positioning, relative to the original position of the element is moved, the original position is still there (usually enclosed with absolute positioning to use).

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

Copy the code

1.1.4 Absolute Positioning mode

Absolute positioning (relative) is based on the enclosing elements (left or right), and if not, it’s the HTML element, which is the largest. (formula: the child is not the father).

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

Copy the code

1.1.5 Sticky positioning method

Viscous positioning, similar to fixed positioning, but a little different, you can slide freely at the beginning, when you get to a certain position, it will stay there. First free slide, to a certain position and then fixed there.

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

1.1.6 Instance source code

<! < img style=" text-align: center; "> < img style=" text-align: center;" 2000px;" > <! <div class="static" style =" box-sizing: border-box; color: RGB (0, 0, 0); line-height: 22px; font-size: 13px! Important; white-space: inherit! Important;" - fixed position -- -- > < div class = "fixed_1" > fixed block 1 < / div > < div class = "fixed_2" > fixed block 2 < / div > < div Class ="fixed_3"> </div> <! --> <div class="relative"> <div class="relative"> -- Absolute location --> <div class="absolute"> </div> </div> <! <div class="sticky"> </div> </div> </body> </ HTML >Copy the code

1.2 float positioning

1.2.0 Example code running renderings

1.2.1 float,

What is float positioning? Floating element, from the document flow (such as normal we put a div in the page, there is a document flow, is there will be a position, and become a float positioning, will float up, the original location is not occupied, and then put the other div, from ignoring the position of the float, normal), space release (turned out to be occupied by the position, And then you float, and you float, and you don’t take up this position).

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

1.2.2 Instance source code

<! < span style> div. Main {width: 1000px; 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> <! - floating -- > < div class = "main" > < div class = "child" > < / div > < div class = "child" > < / div > < div class = "clear" > < / div > < / div > </body> </html>Copy the code

2. Common layouts in development

2.1 the flex layout

A responsive layout. What is responsive? You can zoom in and out with the size of the browser window, and the layout elements zoom in and out accordingly.

Specific analysis sees the explanation of the third section below.

2.2 ANTD Grid layout

When we develop with the Ant Design component, we have to use one of its own layout patterns.

Ant Design/Components /…

2.3 Grid Grid layout

If Flex is a one dimensional layout, grid is a two dimensional layout. It has rows and columns. Flex has only rows.

Refer to web log – nguyen other CSS Grid Grid layout tutorial: www.ruanyifeng.com/blog/2019/0…

3 flex layout details

3.1 What is a Flex Layout

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

  • Block, “Block,” used for parts of a web page
  • Inline, used for text
  • Table for two-dimensional table data
  • Positioning, used to specify the position of an element

Flexible frame layout modules make it easier to design flexible and responsive layout structures without using float or positioning.

3.2 Tutorial Summary

3.2.1 Basic Concepts

  • Containers and Properties

Elements that use a Flex layout are called Flex Containers, or “containers” for short. All of its child elements automatically become members of the container and are called Flex items, or “projects” for short.

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

3.2.2 Container properties

Containers typically have six properties

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
3.2.2.1 flex – direction

The flex-direction attribute determines the direction of the spindle (that is, the alignment of the items).

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

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

Column is in the reverse order of row, and items are in the positive 1-2-3 order. Column-reverse is in the reverse order of column, and items are in the reverse order of 3-2-1 order.

3.2.2.2 flex – wrap attributes

Used to control whether an item is newline. Nowrap means no newline.

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

Nowrap means no line breaks, items will always be on the first line of the container, no matter how many items there are, they will always be on the first line.

Wrap means to wrap lines. When items are not finished on the first line, they are automatically switched to the next line.

Wrap-reverse is also the same thing, but it starts at the bottom (before we all started at the top).

3.2.2.3 flex – flow properties

The flex-flow property is a shorthand for the Flex-direction and flex-wrap properties, and defaults to row nowrap (horizontal, no line feed).

.flex-container { flex-flow: <flex-direction> || <flex-wrap>; }Copy the code
3.2.2.4 the justify – content attribute

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

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

The main axis here is let’s call the horizontal axis the main axis. The meanings of constant values are as follows:

  • flex-start(Default value) : Left-aligned
  • flex-end: the right alignment,
  • centerCenter:
  • space-between: Both ends are aligned so that items are equally spaced.
  • space-around: Each item is equally spaced on both sides. As a result, the space between items is twice as large as the space between items and borders.
3.2.2.5 the align – the items property

Yo, this is also commonly used, good! The align-items property defines how items are aligned on cross axes.

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

The cross axis here is let’s call the vertical axis the cross axis. The meanings of constant values are as follows:

  • flex-start: Aligns the starting points of the intersecting axes.
  • flex-end: The end point alignment of the cross axis.
  • center: Midpoint alignment of intersecting axes.
  • baseline: Baseline alignment of the first line of text for the project.
  • stretch(Default) : If the project has no height set or is set to AUTO, it will take up the entire container height.
3.2.2.6 align – content attribute

The align-content attribute defines the alignment of multiple axes. This property does not work if the project has only one axis.

The meanings of constant values are as follows:

  • flex-start: Aligns with the starting point of the cross axis.
  • flex-end: Aligns with the end point of the cross axis.
  • center: Aligns with the midpoint of the intersecting axis.
  • space-between: Is aligned 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 the spacing between the axes and the border.
  • stretch(Default) : The axis occupies the entire cross axis.

3.2.3 Project Properties

In the previous section, we introduced the properties that are written on the container and then applied to the layout style of the items in the container. The project attributes are written on the project. Another way of saying it is that the project property is the equivalent of the li that we wrote in ul, write the property to Li.

I don’t use them often, so I’ll just keep them short and see the reference article at the end of this article for more details.

The project writable attributes are as follows:

  • orderDefine the order of items. The smaller the value, the higher the order, the default is 0.
  • flex-growSpecifies how much a Particular Flex project will grow relative to the rest of the Flex projects.
  • flex-shrinkSpecifies how much a Particular Flex project will shrink relative to the rest of the Flex projects.
  • flex-basisSpecifies the initial length of the Flex project.
  • flexIs the shorthand property for the flex-grow, Flex-shrink, and Flex-basis properties.
  • align-selfSpecifies the alignment of the selected destination within the elastic container. Overrides the default alignment set by the container’s align-items property.

3.3 Flex Layout Applications

3.3.0 Example code running renderings

3.3.1 Instance HTML source

<! <title> < span style>.flex-container {display: flex; flex-direction: row; flex-wrap: wrap; background-color: DodgerBlue; } /* Select all <div> elements whose parent element is styled.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>Copy the code

4 the last

4.1 the reference

W3school Flexbox layout module www.w3school.com.cn/css/css3\_f…

To understand an article flex layout www.cnblogs.com/echolun/p/1…

Flex layout tutorial: syntax www.ruanyifeng.com/blog/2015/0…

4.2 note

This article serves as a summary of my study, and I will share it with you. If you think these contents are useful to you, please give me a thumbs-up ~ thank you ~

Because the personal technology is limited, if there is any mistake or doubt, welcome to point out or give advice! Thank you very much!

Personal blog: zhangqiang.hk. Cn

Welcome to join the front-end learning QQ communication group of the blogger: 706947563, focus on the front-end development, learn and progress together!