css中新的布局

主要是介绍了columns 多列布局以及栅格布局

• 栅格布局：
  • 栅格布局看这一篇：https://www.html.cn/archives/8706 (opens new window)以及脚步相关文章。
  • 
  • 
  • 
  • https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/ (opens new window)
  • http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html (opens new window)
  • https://zhuanlan.zhihu.com/p/33030746 (opens new window)
• 删格布局：（重点）
  • https://www.html.cn/archives/8706 (opens new window) 栅格的威力,使用了一行代码实现自适应布局。以及脚步相关文章。
    • 文章截图 (opens new window)
  • https://www.cnblogs.com/juetan/p/13210411.html (opens new window) 栅格的属性归纳
    • grid-template-columns、grid-auto-rows、grid-auto-columns更多的属性值，参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-rows (opens new window)
    • 文章截图 (opens new window)
    • 理解：
      • grid网格线命名 (opens new window)
      • fit-content() (opens new window)：根据公式 min(maximum size, max(minimum size, argument))计算得到值。根据内容计算 minimum size 的值，然后根据传入的给fit-content(x)的参数x作为argument值，最后值不能大于argument。
      • 理解CSS3 max/min-content及fit-content等width值：https://blog.csdn.net/tian361zyc/article/details/76444567 (opens new window)
      • 网格布局中 grid-column-start, grid-column-end 和 grid-row-start, grid-row-end 的理解 (opens new window)
• 多列布局：https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/
  • 多列布局的很多特性可以类比其他特性去记忆
• shapes布局：https://www.zhangxinxu.com/wordpress/2019/02/css-css3-shapes/ - 作者借助他实现了iPhonex刘海的适配。
• 发现自己对flex布局不是非常熟悉，可以参考：flex的文章这里讲得很清楚了

  • http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (opens new window)

  • https://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)

  • flex布局中flex-grow与flex-shrink的计算方式 (opens new window) 很多人却不清楚。

    • 文章截图 (opens new window)

  • flex常用特性总结：https://blog.csdn.net/MZYJP/article/details/127731998

    ​