preface

I can say that I am the most idle person in front group of Changsha, and I have added many front group of Changsha free of charge, that is, I can learn from other people’s problems and solutions to expand my knowledge, but also to help solve other people’s problems to do my part. Have seen several times asked the layout, and the group all answered flex layout, no other layout, do not know is really only know flex layout or know other layout lazy to say. Sure, flex layouts are really good to use, but there are other aspects of the layout that you should be aware of as well. This article Outlines only two other rare layouts and their basic usage.

flex

Before the interview, people who are not very confident will look for some interview questions to refresh themselves. One of the classic questions is the vertical center question. Baidu a few answers, the most common ones are negative margin,transform, set to inline elements then lineHeight,flex, etc. If you have noticed, these methods either need to know the width of the child container (negative margin,transform) or can not really be vertical (set lineHeight). Common vertical center layout only Flex does not need to care about the width and height of the parent container and the width and height of the child container can be vertically centered. This is really amazing and requires very little code, and flex has a lot of other very efficient uses that we love on the front end. But, I say but, this is basically a deep mobile developer favorite. As a PC developer for years, I do not use Flex very often. Flex is only compatible with IE10 and above (the biggest pain point), and the old version of Flex is not the same as display:box, display:flex, but also do compatibility processing. Are there any other layouts that have the basic capabilities of flex layouts that are compatible with older browsers? There are!

table

Display :table This table layout is awesome. Table layout is sensitive to changes in the width and height of the container. Simply put, table layout is flexible. When the padding property overflows, the parent element is automatically stretched. Almost as basic as Flex (it’s too old to be better than flex, after all), here are a few examples

  • Vertically centered example, silky like Flex
  • Traditional Grail layout, two columns can be referenced at the same time
  • Magic contour layout, suitable for the scenario where data is displayed as a table
  • Dynamic footer, suitable for the company’s official website

These are probably the most common table layouts. The disadvantage is obvious. If you use table, the horizontal arrangement under the container will always be the same height, which is quite embarrassing. In addition, many apis also need to be combined with the HTML table tag to understand, which is time-consuming. Maybe that’s why it didn’t catch on.

grid

Flex layout is an axis layout, can only specify the “project” against the axis position, can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout. I won’t go into how awesome it is, but there are too many apis, so let me summarize a little bit:

  • The overall layout style is grid-template-columns grid-template-rows, which determines the number of horizontal and vertical grids and the corresponding proportion of the grid layout.
  • Grid spacing: grid-row-gap, grid-column-gap, grid-Gap, these three attributes determine the width of the invisible grid lines.
  • Layout flow: grid-auto-flow. The default value is ROW, which is “column first”. Or you can set it to column, which is “column first, row after row”. Similar to flex’s flow concept.
  • Align attributes: context-items, align-items, place-items, context-content, align-content, place-content. The items ending is to align and arrange the elements in the cell, and the content ending is to align and arrange all the grids in the grid as a whole. There are a lot of complex properties here, which is a hard part to learn
  • Grid-column-start: The vertical grid line where the left border is. Grid-column-end: the vertical grid line with the right border. Grid-row-start: horizontal grid line with the top border. Grid-row-end: the horizontal grid line with the bottom border. Notice that the leftmost or uppermost grid line is numbered 1 instead of 0. With these attributes, you can arrange your desired layout within the grid.
  • Mobility: Grid-auto-flow: row dense; Column Dense, automatic grid filling. You can remove the attribute in the example to see the effect

Here are a few common uses:

  • Vertical center
  • The holy grail layout
  • Responsive layout
  • Common use

The Grid layout can be used for almost any layout, and the obvious downside is compatibility.

Float and absolute

These two layouts are also the most commonly used, but in the face of layout problems, it seems that many people will not first think of the two most compatible and most commonly used layouts.

conclusion

Laying out a page is often a false proposition, and you can use a variety of CSS combinations to achieve your goals. As the most popular flex, it is true that many people reuse it, but as serious front-end engineers, we should think carefully before choosing our own layout methods and means, after all, Flex is not a panacea.

Original link: tech.gtxlab.com/n_flex.html

* Author profile: Shuan Zhang, Renhe future big data front-end engineer, focusing on HTML/CSS/JS learning and development