css布局方式梳理和总结

1. 前言
        网页布局是CSS的重点功能，布局的传统方案是基于盒子模型，依靠display属性、position属性和float属性，它对一些特殊布局很麻烦。

        CSS3推出的Flex布局和网格布局，让开发者更容易定制自己想要的布局。本篇梳理和总结一些布局方式。

2. CSS3多列
CSS属性    说明    示例
columns    功能：column-width column-count;的简写    
div {

  column-count: 3;

  column-gap: 10px;

  column-rule: 1px solide red; 

}

column-width    
功能：指定各列的宽度

取值：auto | length

column-count    
功能：指定需要分割的列数

取值：number | auto

column-span    
功能：指定元素跨越多少列

取值：1 | all

column-gap    
功能：列与列之间的间隙

取值：length | normal

column-rule

功能：column-rule-width column-rule-style column-rule-color;的简写

column-rule-width

功能：列与列之间的边框线宽度

取值：thin | medium | thick | length

column-rule-style

功能：列与列之间的边框线类型

取值：

1. none 没有规则

2. hidden 隐藏规则

3. dotted 点状规则

4. dashed 虚线规则

5. solid 实线规则

6. double 双线规则

7. groove 定义 3D grooved规则。该效果取决于宽度和颜色值

8. ridge 定义 3D ridged规则。该效果取决于宽度和颜色值

9. inset，定义 3D inset规则。该效果取决于宽度和颜色值

10. outset，定义 3D ouset规则。该效果取决于宽度和颜色值

column-rule-color    功能：列与列之间的边框线颜色
本小节整理参考于：CSS3 多列 | 菜鸟教程 (runoob.com)

3. CSS3 Flex布局
CSS属性    说明    示例
display: flex | inline-box    
功能：定义当前元素为弹性容器（flex container），所有子元素成员容器成员（flex item）

注：父元素定义为弹性布局，子元素的float、clear和vertcial-align属性会失效

div {

  display: flex;

}

容器属性（设置在父元素上的CSS属性）
flex-flow    功能：<flex-direction> <flex-wrap>;的简写形式    
div {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

/*flex-flow: column wrap; */

}
————————————————
版权声明：本文为CSDN博主「古狼（Jenkin_guwolf）」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45620943/article/details/135255462