本文共 2553 字，大约阅读时间需要 8 分钟。
一、多列
1、colum-count：设置分栏Title 2019年我国进口越南大米仅48万吨，为2011年以来最低水平；今年1～2月从越南进口大米仅3万吨。事实是，2016年我国实行粮食收储制度改革以来，大米进口数量逐年下降，2019年大米进口255万吨，同比下降53万吨，进口大米占我国大米消费约1%，主要用于品种余缺调剂，如泰国香米，即使大米不进口也不会影响国内市场供给。 尽管近年来国际市场曾几次出现“过山车”式的粮价大幅波动，但由于我国粮食连续丰收，供给充裕，库存充足，保障有力，粮食市场总体保持稳定。 党的十八大以来，党中央确立了“以我为主、立足国内、确保产能、适度进口、科技支撑”的粮食安全战略，提出了“谷物基本自给、口粮绝对安全”的新粮食安全观，国家采取一系列富有成效的政策举措，粮食综合生产能力稳步提升，粮食连年获得丰收，实现了口粮完全自给，谷物自给率保持在95%以上。 手中有粮，心中不慌。目前我国谷物库存保持较高水平，保障国家粮食安全的物质基础较为坚实。2019年我国粮食种植面积稳定，粮食再获丰收，全年粮食总产量66384万吨，同比增加594万吨，增长0.9%。总体看，我国粮食供求总体宽松，完全能满足人民群众日常消费需求，也能够有效应对重大自然灾害和突发事件的考验。
效果如图
2、column-gap：设置栏间距 继续在刚才的代码中添加column-gap: 50px;
效果如图，间距变大
3、column-rule-style: 设置栏间分割线
继续在刚才的代码中添加column-rule-style: dashed
效果如图，分割线产生
除此之外，还有： none 没有分隔线 hidden 隐藏线 dotted 点线 dashed 虚线 solid 实线 double 双线 groove 3D沟槽效果 ridge 3D脊状效果 inset 3D左上角阴影效果 outset 3D右下角阴影效果 最后面四个在这个效果里面不好实现，具体效果可以看以下代码
分栏
效果如图
4、column-rule-width: 设置分割线线宽
继续在刚才的代码中添加column-gap: 50px;
效果如图，分割线变宽
5、column-rule-color: 设置分割线颜色
继续在刚才的代码中添加column-gap: 50px;
效果如图，分割线变颜色
6、复合写法
column-rule:width style color; 可以直接写成：column-rule: 5px solid #4b6630;7、column-width:100px 列宽
注意，如果你设置的宽度足够大，则显示的分栏效果则会慢慢消失，也就是假设你设置的3栏，可能会变成两栏8、columns简写
columns是column-width 和 column-count 的简写方式。 简写方式为：columns: width count;二、flex弹性布局
1、flex-direction 指定子元素在父容器中的位置。 语法：flex-direction: row | row-reverse | column | column-reverse 参数： row ：横向从左到右排列（左对齐），默认的排列方式。 row-reverse ：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 column ：纵向排列。 column-reverse ：反转纵向排列，从后往前排，最后一项排在最上面。flex-direction
效果如图
其余几个可以自己尝试 2、justify-content（应用于父元素）
把弹性项沿着弹性容器的主轴线对齐。语法： justify-content: flex-start | flex-end | center | space-between | space-around
参数：
flex-start：紧凑方式左对齐（默认值） flex-end：紧凑方式右对齐 center：紧凑方式居中对齐 space-between：除了第1个和最后1个子元素外，其它子元素等分空白区域 space-around：所有子元素等分空白区域justify-content
效果如图
其余参数可以自行尝试 3、align-items（应用于父元素）
子元素在侧轴（纵轴）方向上的对齐方式。此属性作用于父容器。语法：align-items: flex-start | flex-end | center | baseline | stretch
参数：
flex-start:沿纵轴顶端对齐（默认值） flex-end:沿纵轴底端对齐 center:沿纵轴垂直居中对齐 baseline:沿纵轴基线对齐 stretch:纵向拉伸对齐align-items 第一个盒子第二个盒子第三个盒子
效果如图
其余可自行尝试 4、flex-grow（应用于子元素）
子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。语法：flex-grow：number;
flex-grow 第一个盒子第二个盒子第三个盒子
效果如图
可以自行修改数字实验 转载地址：http://kfvrn.baihongyu.com/