Flex and grid layout of CSS

osc_60387719 2020-11-11 18:28:15
flex grid layout css

On a daily basis , The front end often deals with layout ,position ,float, Although it has its own characteristics , But it's also easy to have problems ; Here we mainly introduce two kinds of powerful layouts flex And grid And some simple application examples ;

1、flex Layout

Reference here www.jianshu.com/p/4290522e1…

Use flex The elements of the layout are called containers , Need to set up display:flex; The elements contained in the container are children of the container . Containers and children have their own style properties ; The properties of the container are used to lay out the children , The attributes of a subitem are used to lay out the contents and elements it contains ;

1.1 Common container properties are :







Copy code

1.1.1 flex-direction attribute

This attribute is mainly used to control the arrangement direction of subitems , Attribute value has :row |row-reverse|column|column-reverse

row: The subitems are arranged horizontally , From left to right ;

row-reverse: The subitems are arranged horizontally , From right to left ;

column: The subitems are arranged vertically , From top to bottom ;

column-reverse: The subitems are arranged vertically , From bottom to top ;

1.1.2 flex-wrap attribute

This property is mainly used to control the line feed of the sub item arrangement ; Attribute value has :nowrap|wrap|wrap-reverse

nowrap: Don't wrap ;

wrap: Line break ;

wrap-reverse: Line break , But the first line will be below ;

1.1.3 flex-flow attribute

The attribute is actually flex-direction And flex-wrap An abbreviated set of two attributes , Use as :

flex-flow: row nowrap;

1.1.4 justify-content attribute

This attribute is a common attribute , Control the subitem in flex-direction Alignment of attributes in the direction they are aligned ; Attribute value has :

flex-start | flex-end | center | space-between | space-around

flex-start: Align from the start of the spindle ;

flex-end: Align from the end of the spindle ;

center: Center it along the main axis

space-between: full-justified , The interval between subitems is the same ;

space-around: The two ends of subitems are equally spaced ;

1.1.5 align-items attribute

This attribute defines how it is aligned on the cross axis ( Relative to flex-direction The cross axis of the spindle ); Property value Yes :flex-start | flex-end | center | baseline | stretch |

flex-start: The starting end of the cross axis is aligned ;

flex-end: The ends of the cross axis are aligned ;

center: Center alignment of cross axes ;

baseline: The first line of text of the subitem is baseline aligned ;

stretch: Subitems have no height or auto, Using this property will take up the height of the container ;

1.1.6 align-content attribute

This attribute defines the alignment of multiple axes , Alignment can be understood as multiple line alignment , A line of subitems uses this Attribute has no effect ;

Attribute value has : flex-start | flex-end | center | space-between | space-around | stretch

flex-start: Align with the starting point of the intersecting axis ;

flex-end: Align with the end of the cross axis ;

center: Align with the midpoint of the intersecting axis ;

space-between: Align with both ends of the cross axis , The average distribution of spacing between axes ;

space-around: The spacing between each axis is equal . therefore , The distance between the axes is less than that between the axes and the frame Double the interval ;

stretch( The default value is ): The axis occupies the entire cross axis ;

1.2 Common subitem properties are :







Copy code

1.2.1 order attribute

Defines the order in which the attributes are arranged , The smaller the number is. , The more we line up , Not commonly used , The default value is 0;

1.2.2 flex-grow attribute

The default value of this property is 0, It mainly defines the proportion of the width or height of the subitems in a row or column , If the subitems in a row This property has the same value , The proportion is the same ; If the larger the value, the greater the percentage ; In proportion to 2 It's the ratio 1 Double of ; If it Its children do not have this property set , There is only one subitem set , Then the subitem will occupy the remaining space ;

1.2.3 flex-shrink attribute

This attribute defines the scaling of the subitem ; The default value is 1, When there is not enough space, the small items will be reduced ; If you set the subkey's flex-shrink The property value is 0 when , When there is not enough space , Other children zoom , This subitem does not scale ;( Use this property It can solve the problem of line feed alignment )

1.2.4 flex-basis attribute

This attribute is not commonly used , It defines before allocating extra space , Spindle space occupied by the project (main size). Liu According to this property , Calculate if the spindle has extra space . Its default value is auto, The original size of the project ;

1.2.5 flex attribute

The attribute is flex-grow, flex-shrink and flex-basis A combination of three attributes ,

The default value is flex: 0 1 auto;

1.2.6 align-self attribute

This attribute , Allows children to be detached from the container align-items attribute , And then it has its own alignment , The default value is auto;

Attribute value has :auto |flex-start | flex-end |center | baseline | stretch

Property value and align-items The same function ;

1.3 Related examples and knowledge points

1.3.1 flex Relevant examples

Here are some examples of mobile terminals ,PC The end is similar to ;

1、 The common layout is the center ; The code is as follows :







Copy code

2、 Text alignment , Can change lines

Mission location

******* place

.w-style {

display: flex;

flex-direction: row;

font-size: 12px;

font-family: PingFangSC, PingFangSC-Regular;

font-weight: 400;

text-align: left;

color: rgba(20, 40, 65, 0.5);

.time-style {

color: #142841;


.right-margin {

margin-right: 15px;

width: 48px;

flex-shrink: 0;



Copy code

3、 have access to flex Layout , Design the side style as follows :

" alt="" width="28" height="30" align="">

The code is as follows :

2020.08.18 19:17 CHEN Si

Task details

.content-box { margin: 0 15px; display: flex; flex-direction: row; .box-left { display: flex; margin-right: 10px; flex-direction: column; transform: translateY(10px); .dot { width: 10px; height: 10px; border-radius: 5px; background-color: rgba(20, 40, 65, 0.3); } .line { margin-left: 4px; width: 1px; flex: 1; background: rgba(20, 40, 65, 0.3); } } .box-right { flex: 1; p { margin-top: 5px; span:first-child { color: rgba(20, 40, 65, 0.6); } span:last-child { margin-left: 10px; color: brown; } } .task-detail { margin: 15px; .task-tip { color: rgba(20, 40, 65, 0.6); } .task-content { margin-top: 10px; background: rgba(20, 40, 65, 0.1); width: 100%; height: 160px; } } }}

Copy code

4、 The holy grail layout ;

1.3.2: At the same time , You can still use display:flex, Lay out your own internal elements ;

Form nested independent modules ;

Summary : We can also see that flex Layout , Often deal with some one-dimensional layout , use flex Nesting can handle some two dimensions Layout , For example, the Grail layout above , But there's a better layout for binary layout , That's it grid Layout ;

2、Grid Layout :

grid The grid layout is realized , You can control rows and columns at the same time ; Please refer to this good article for details juejin.im/post/685457… ;grid Layouts also have container properties and child properties ; Here is a brief summary :

2.1 Container attribute














Copy code

2.1.1 grid-template-columns and grid-template-rows attribute :

grid-template-columns : Control column ( Explicit ) Width ;

grid-template-rows : Control line ( Explicit ) Height ;

.contaainer {

grid-template-columns: 200px 200px 200px; / Each column has the same width , Simple writing repeat(3,200px)/

grid-template-rows: 100px 200px;

grid-gap:20px; / Here's how /


Copy code

" alt="" width="28" height="30" align="">

It can be seen that , The picture above shows 2 That's ok 3 Column , The width of each category is 200px, The height of the first line is 100, The height of the second line is 200px;

2.1.2 grid-auto-columns and grid-auto-rows attribute :

grid-auto-columns : control ( Implicit ) Column width ;

grid-auto-rows : control ( Implicit ) Row height ;

Explicit and implicit are relative , If :grid-template-columns and grid-template-rows attribute : If the size of the corresponding row and column is set, it is displayed , If you exceed the corresponding row and column, you need to use grid-auto- columns and grid-auto-rows Property to set the corresponding column width and row height , Then it is implicit ;

grid-template-columns and grid-template-rows Properties and grid-auto-columns and grid- auto-rows attribute , In some cases, you can mix them up , such as :

1、3 More than one line , Then the line height is 200px The column width is 200px;


grid-auto-flow: row;/* Control layout direction */


Copy code

2、3 Rows and columns ,


grid-auto-flow:column;/* Control layout direction */


Copy code

2.1.3 grid-row-gap and grid-column-gap and grid-gap attribute :

These three properties are often used to control the spacing of subitems , seeing the name of a thing one thinks of its function :

grid-row-gap: Control the spacing between rows ;

grid-column-gap: Control the spacing between columns ;

grid-gap: It's a short form of the first two , The new version discards the above attributes , use gap attribute ;

2.1.4 justify-items attribute 、align-items Properties and place-items attribute

These three attributes , Control the alignment of the content in the subitem separately :

justify-items Control the horizontal position : Left 、 in 、 Right 、 Stretching takes up the children ;

align-items Control the vertical position : On 、 in 、 Next 、 Stretching takes up the children

place-items Is the abbreviation of the above two properties , The order is align-items、justify-items. If only set A value , Then the two properties are set to the same value ;

.container {

justify-items: start | end | center | stretch;

align-items: start | end | center | stretch;

place-items: align-items Property value justify-items Property value ;


Copy code

2.1.5 justify-content attribute 、align-content Properties and place-content attribute

These three attributes are related to flex The container properties of are similar to , It's just that it's multi row and multi column ;

justify-content : The horizontal position of the entire content area inside the container ( Left middle right );

align-content: The vertical position of the entire content area ( 3 );

place-content: Is a short form of the above two properties , In sequence :align-content、 justify-content;

.container {

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;


Copy code

space-around - The spaces on both sides of each subitem are equal . therefore , The spacing between subitems is greater than that between subitems and container borders Double the interval

space-between - The interval between subitems and subitems is equal , There is no space between the child and the container border

space-evenly - The interval between subitems and subitems is equal , The same length of space between the child and the container border

stretch - When the child size is not specified , Stretching takes up the whole container

2.1.6 grid-template-areas attribute

Of the attribute and the subitem grid-area Attributes are used together , Used to divide a certain layout area , Use... In subitems grid-area Name the children , Use... In containers grid-template-areas attribute , Divide the area ;

.container {

display: grid;

grid-gap: 10px;

grid-template-columns: 120px 120px 120px;


". header header"

"sidebar content content";

background-color: #fff;

color: #444;


.sidebar {

grid-area: sidebar;


.content {

grid-area: content;


.header {

grid-area: header;


Copy code

Above code , There are three named children , In the container , Use grid-template-areas attribute , Divided into 6 Regions ,"." Represents an empty area , Merge into a large area of the same name , Here's the picture :

2.2 Child properties









Copy code

2.2.1 grid-column-start attribute 、grid-column-end attribute 、grid-row-start Properties and

grid-row-end attribute

grid According to the setting of rows and columns, the grid area is divided , The region contains subitems , The above four attributes , Actually It is to use grid lines to locate the region position of subitems ;

grid-column-start attribute : The vertical grid line where the left border is

grid-column-end attribute : The vertical grid line where the right border is located

grid-row-start attribute : The horizontal grid line where the top border is located

grid-row-end attribute : The horizontal grid line where the lower border is located

.wrapper {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 20px;

grid-auto-rows: minmax(100px, auto);


.one {

grid-column-start: 1;

grid-column-end: 2;

background: #19CAAD;


.two {

grid-column-start: 2;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

/* If there is overlap , Just use z-index */

z-index: 1;

background: #8CC7B5;


.three {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 4;

background: #D1BA74;


.four {

grid-column-start: 1;

grid-column-end: 2;

grid-row-start: 2;

grid-row-end: 5;

background: #BEE7E9;


.five {

grid-column-start: 2;

grid-column-end: 2;

grid-row-start: 2;

grid-row-end: 5;

background: #E6CEAC;


.six {

grid-column: 3;

grid-row: 4;

background: #ECAD9E;


Copy code

2.2.2 grid-area attribute

It can be understood as the use of , Name the subitem ; Often with grid-template-areas Attributes are used together ;

2.2.3 justify-self attribute 、align-self Properties and place-self attribute

justify-self Property to set the horizontal position of the child content ( Left middle right ), Follow justify-items The usage of the attribute is finished Exactly the same , But only works on a single subitem

align-self Property to set the vertical position of the child content ( 3 ), Follow align-items The use of attributes is completely Agreement , It only works on a single subitem

place-self It's settings align-self and justify-self Short form of

justify-self: start | end | center | stretch;

align-self: start | end | center | stretch;

Copy code

2.3 Use cases

.sport-box { padding: 15px 13px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; grid-auto-rows: 100px; gap: 10px; .sport-item { border-radius: 6px; box-shadow: 0px 2px 4px 0px rgba(0, 145, 250, 0.35); text-align: center; img { margin: 11px auto 0px; } }}

Copy code


  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple