Dry goods: CSS layout

osc_60387719 2020-11-11 11:06:12
dry goods css layout


Fixed width layout : The general width is 960/1000/1024 px

Not fixed width layout : The layout is mainly based on the principle of document flow

Responsive layout :PC Top fixed width , There is no fixed width on the phone

Use scenarios of various layouts

float Layout Add... To the child element float:left and width Add... To the parent element .clearfix This layout does not need to be responsive , It's for IE To prepare for . stay IE 6/7 There are double marginbug when , Can target IE 6/7 hold margin halve . Or add display: inline-block. flex Layout Let an element become flex Containers .container{ display: flex; /or inline-flex/ } Copy code change items Direction of flow ( Spindle )

flex-direction: row From left to right

flex-direction: row-reverse From right to left

flex-direction: column From top to bottom

flex-direction: column-reverse From bottom to top

Change the line

flex-wrap: nowrap Default , Don't wrap , Automatic indentation

flex-wrap: wrap Line break , The first row is at the top

flex-wrap: wrap-reverse Line break , The first row is at the bottom

Spindle alignment There is no change flex-direction Direction , The default spindle is the horizontal axis .

justify-content: flex-start Align left

justify-content: flex-end Align right

justify-content: center In the middle

justify-content: space-between Align the two sides , The gap between projects is equal

justify-content: space-around The spaces on both sides of each item are equal , So the gap between projects will be at both ends 2 times

justify-content: space-evenly The gap between the two ends and between the items is equal

Secondary axis ( The vertical axis ) alignment

align-items: flex-start Top alignment

align-items: flex-end Bottom alignment

align-items: center In the middle

align-items: strech Default , If the item is set height or auto, Will fill the entire container

Multi line content

align-content: flex-start Start alignment

align-content: flex-end End alignment

align-content: center In the middle

align-content: stretch completely fill

align-content: space-between full-justified , The average distribution of spacing between axes

align-content: space-around The gap between the axis and the frame and between the axis and the axis is evenly distributed

order attribute order Property defines the order in which items are arranged . The smaller the numerical , Line up front , The default is 0. .item{ order: <integer>; } Copy code

flex-grow attribute flex-grow Attribute defines the magnification of the item , The default is 0

If the attributes of the items are 1 when , They're going to divide up the rest of the space , If the attribute of an item is 2, Other item attributes are 1 when , So the former takes up twice as much space as other projects . flex-shrink attribute It defines the reduction ratio of the project , The default is 1, Out of space , The project shrinks flex-basis attribute Control base width , The default value is auto, The original size of the project . flex attribute flex The attribute is flex-grow、flex-shrink and flex-basis Abbreviation , The default value is 0 1 auto. The last two properties are optional . .item{ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] } Copy code This property has two shortcut values :auto(1 1 auto) and none (0 0 auto). It is recommended to use this property first , Instead of writing three separate attributes , Because the browser will calculate the relevant value . align-self attribute align-self Property allows a single item to have a different alignment than other items , covering align-items attribute . .item{ align-self: auto | flex-start | flex-end | center | baseline | stretch; } Copy code

Grid Layout Become a container .container{ display: grid | inline-grid; } Copy code Row and column .container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } Copy code

set range .item{ grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } Copy code

Equal parts Set a property value for each item , For example, there are three projects , Give each item a value of 1fr, That is, the space is divided into three equal parts . .container{ grid-template-columns: 1fr 1fr 1fr; Copy code Partition Name the grid area , The amount of space occupied by the corresponding project . .container{ width: 400px; height: 300px; border: 1px solid red; display: grid; grid-template-columns: 50px 50px auto 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . aside" "footer footer footer footer" } .header{ grid-area: header; background: red; } .main{ grid-area: main; background: blue; } .aside{ grid-area: aside; background: yellow; } .footer{ grid-area: footer; background: grey; } Copy code

Gap gap .container{ grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; } 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根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  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根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  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