Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > Flex与grid属性思维导图
Blogger Information
Blog 47
fans 0
comment 3
visits 45070
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex与grid属性思维导图
江流
Original
626 people have browsed it

Flex与grid属性思维导图

  • flex和grid是两值网页的布局方式，flex的盒子CSS为：display: flex;grid的盒子CSS为：display: grid;
  • flex布局是一种线性布局，只处理一行或者一列的项目位置；grid布局是平面布局，是二维表格式的布局。
  • 在布局是flex和grid都使用div模型，分为容器和项目两个层级进行布局编码。
  • 在flex和grid的布局容器中，都有的属性：place-content、place-item，其取值也类似。

Flex属性

grid属性

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：总结的不错, flex有一个容器属性简写没有 flex-flow
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
江流 2021-10-04 08:54:48
谢谢老师批改、提示
1 floor
Author's latest blog post