• Author: Chen Da Yu Tou
  • Making: KRISACHAN
  • Record reason: The 5th CSS Conf was held in Shenzhen on March 30, 2019. As a CSS novice and lover, Fishhead also signed up to participate. If you want to know your feelings after participating in the 5th Shenzhen CSSConf on March 30, 2019, you can see the question “How did you experience participating in the 5th Shenzhen CSSConf on March 30, 2019? The answer. At the meeting, I learned a lot of dry goods knowledge and wrote articles for subsequent memory because I was afraid of forgetting them.

Sharing guest Profiles

CSS Layout for the New Era is shared by Emily Chan, an internationally renowned CSS expert in Singapore. Miss Chen’s personal blog is www.chenhuijing.com/.

The topics of miss Chen’s sharing are as follows:

CSS layouts are often a headache for front-end developers. But in recent years, browsers have evolved to support flexible boxes, grid layouts, box model alignment, and more. These CSS standards were written purely to deal with network layout. We’ll take a closer look at the characteristics of these new attributes, layout tips, examples, and best practices for the new era. Hopefully the audience will be inspired to use these new CSS properties to create designs that are more in line with the nature of the browser.

The share of online Slide: www.chenhuijing.com/slides/53-c…

Why is it harder to row vertically than horizontally?

At the beginning of sharing, Hui Jing teacher threw out the above questions.

The answer is simple, because at the time of the initial, HTML and CSS is just for the European and American countries and service, and European and American countries typography is horizontal, so the first design is also horizontal document flow is given priority to, behind to the development of the Internet, to connect to the world, have the demand of the vertical layout, Therefore, the conclusion is that the designer did not consider vertical layout at the beginning, so the problem of vertical layout is more difficult than horizontal when there is a demand. For comparison of vertical and horizontal layout, you can refer to the logical properties and box model of CSS of Hello CSS series of fish head.

Then Miss Hui Jing shared the history of the Internet. Those interested in this section can also check out the prologue to the Fish Head Hello CSS series – Origins.

Here, hui jing teachers share an interesting link, is that you can see the original web page looks like, the link here: worldwideweb. CERN. Ch/browser /.

Web layout system

In this section, Hui Jing mainly shares three pillars of CSS layout in the new era: Flexbox, Grid and Box Alignment.

CSS layout forces

The CSS layout force is composed of the following and 553 other attributes. Because CSS is a team project. The power of CSS can be fully realized only when the properties are coordinated.

The browser’s rendering process

Hui Jing also introduced the browser rendering process, the following is an excerpt of the original text.

If you want to demythologize CSS layouts, you must be familiar with the browser rendering process. The rendering engine parses the Source document sent by the server into an object that the browser can understand. Before rendering a web page, the browser generates a render tree. This rendering tree is an intermediary structure and a representation of formatting structure of documents.

During CSS parsing, each CSS property value for each element and text node is calculated. The browser uses these values to determine what kind of box to generate.

CSS Display Module Level 3

Huijing also introduced the **CSS Display Module Level 3 **, the following is an excerpt of the original text.

CSS display module in these 20 years, after a lot of evolution. From the beginning of the basic to the latest specification there are 17 attribute values. This specification proposes two display types, internal and external. The inner display type defines how the child elements within an element are laid out, and the outer display type defines how the element participates in the processing of the streaming layout.

During CSS parsing, each CSS property value for each element and text node is calculated. The browser uses these values to determine what kind of box to generate.

The CSS display module specification provides two display types, internal and external. The inner display type defines how the child elements within an element are laid out, and the outer display type defines how the element participates in the processing of the streaming layout.

Flex

In this part, Hui Jing mainly introduced the grammar of Flex and the use of skills (about the grammar part, here is not too tired, interested can read MDN). After introducing Flex, Hui Jing started the first talk: Auto Margin is your friend

In the simple example above, there is only one child inside the container. We can manipulate it using margin. If no orientation is set, the box will be right in the middle of the container. One line to solve the horizontal vertical middle problem.

Then Hui Jing asked: “Why is the block format automatic margin not perpendicular to the center element?”

The reason is that if the height of an element is set to auto, the browser calculates its height only by considering the element’s content and its children, and there is no defined space to adjust the position vertically. Even if an element is set to a fixed height, remember that it is independent of its children. This is most likely a legacy of the decision the browser made in the first place. The browser doesn’t have the ability to calculate margin, so it interprets auto to 0.

Container – The parent-child relationship of the project

This is the turning point that Miss Hui Jing mentioned earlier. Flex or Grid containers are recognized by browsers at layout time because of their relationship to child elements. Therefore, the browser has a way to calculate the four automatic margin values.

CSS Box alignment module

In this section, Hui Jing introduces the CSS Box Alignment Level 3 module.

Here, Miss Hui Jing explains:

Of course, automatic margins alone are not enough. To more precisely adjust the position of child elements, use the attribute values provided by box alignments.

Flexbox’s first public working draft was released in 2009, while Grid’s was released in 2011. The two specifications set up two different sets of alignment properties. After discussion, the working group decided to write box alignment as a separate specification so that past, present and future Formatting Contexts all use the same properties.

There are six attributes for Box alignment. With Flex, you can use four of these attributes, and with Grid, you can use all six.

[W3C][W3C][W3C]www.w3.org/TR/css-alig…] orW3C PLUS

The Grid or Flexbox?

“So Gird or Flex?”

To answer this question, Miss Hui Jing replied:

It’s not an either-or situation, it’s a two-in-one situation.

The Flexbox works well in one – dimensional layouts. Because the rows and columns implemented with Flexbox, even if aligned, are just an illusion. Flexbox rows and columns are unrelated. But in a single – dimensional layout, it has the most elastic features.

The Grid is suitable for two-dimensional Grid layout, because the rows and columns in the Grid are real and are related. You can arrange Grid projects like pieces on a chessboard.

To achieve a design similar to the above layout, it is possible to do it in a new age layout. How do you achieve this disalignment of content, with a thick border around each Grid cell? If you use Grid alone, can you use Box alignment?

Unfortunately, we can’t. As mentioned earlier, the default value for Grid project alignment is stretch. As soon as any other value is used, the item is immediately reduced to the size of the content. But if we set display:flex on the Grid project, make it a Flex container. That represents the contents of the Grid project, which became the Flex project. Now use the Box alignment properties to position the content without affecting the size of the Grid project, and the border can remain on the Grid.

Percentage limits (consistent scaling)

“Responsive web design, which has become quite common, relies on percentages to set the size of elements,” hui said. The limitation of using percentages is that each element has the same scaling rate. Sometimes this results in developers being forced to write countless media Queries in order to cope with the various viewport sizes.

As I delved into these new layout patterns, the most interesting thing I found was the flexible dimensions. Depending on the value of the attribute, elements scale at different rates. Some attribute values will “stand their ground” and try to keep the width of the range as the viewport changes. It’s a little hard to understand, but let’s take a look at some use cases.”

Next, Hui Jing compared the following three groups of attributes:

  1. frcontrastauto

  2. max-contentCompared with fixedwidth

  3. fit-contentcontrastminmax()

(Fish head note: For the above comparison of properties, interested children’s shoes can click the link to view)

Compatible with the processing

“It’s been about two years since the Grid was released, and browser support is now at 88%, which makes it widely supported,” she said. But what about the other 12 percent?”

In fact, the CSS can be tested by feature query. Its syntax is similar to media Query, except that the keyword @supports is used

Fish head Note: About@supportsIf you are interested, you can check out the fish head article [Chapter 1 – SYNTAX and workflow of CSS)

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. You can also scan your wechat account to subscribe to more exciting content.