[分享]css3按标签分栏

CSS3是一种用于网页排版的语言，它带来了很多新的特性，比如按标签分栏。

 .box{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -webkit-box-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
   } 

以上是用CSS3实现按标签分栏的代码，其中box为容器的类名。由于不同的浏览器对CSS3的支持程度不同，因此在代码中使用了多条属性，以确保在各个浏览器下都能正确显示。

该代码中用到了以下属性：

• display：设置元素的显示方式，这里的值为flex，表示使用flexbox布局。
• flex-direction：设置项目的排列方向，这里的值为row，表示水平方向。
• justify-content：设置主轴上的对齐方式，这里的值为flex-start，表示在主轴开始位置对齐。
• align-items：设置交叉轴上的对齐方式，这里的值为stretch，表示在交叉轴上拉伸填满。
• flex-wrap：设置是否换行，这里的值为wrap，表示换行。

以上是关于CSS3按标签分栏的简单介绍和实现方式，希望能对大家有所帮助。