内容简介：代码日志版权声明：翻译自：http://stackoverflow.com/questions/27119691/how-to-start-a-new-column-in-flex-column-wrap-layout
我希望我的数据按列排列(从上到下,从左到右),数据中的每个标题都应该开始一个新的列.有三个限制：
>必须使用flex(我需要使用特定于flex的功能)
>无法对数据进行分组(例如,将所有数据项包含在一个div内)
>无法设定固定高度
我的问题是如何在flex-flow：列换行布局中强制列中断？
.grid {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.grid .head {
width: 25%;
background: orange;
border-bottom: thin dotted;
}
.grid .data {
width: 25%;
background: yellow;
border-bottom: thin dotted;
}
/* my attempt to solve this */
.grid {
height: 76px;
}
<div class="grid"> <div class="head">Column 1 (3 items)</div> <div class="data">item 1-1</div> <div class="data">item 1-2</div> <div class="data">item 1-3</div> <div class="head">Column 2 (4 items)</div> <div class="data">item 2-1</div> <div class="data">item 2-2</div> <div class="data">item 2-3</div> <div class="data">item 2-4</div> <div class="head">Column 3 (2 items)</div> <div class="data">item 3-1</div> <div class="data">item 3-2</div> <div class="head">Column 4 (1 items)</div> <div class="data">item 4-1</div> </div>
break-before
or break-after
property
：
A break is forced wherever the CSS2.1 07001/07002 [CSS21] or the CSS3 07003/07004 [CSS3-BREAK] properties specify a fragmentation break.
在撰写本文时,大多数浏览器都会错误地实现* -break- *属性,或者根本不实现它们.在此之前考虑这个答案.
以下演示工作原理：
> FF33
.grid {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.grid .head {
width: 25%;
background: orange;
border-bottom: thin dotted;
}
.grid .data {
width: 25%;
background: yellow;
border-bottom: thin dotted;
}
/* force column breaks */
.grid .head:nth-child(n + 2) {
page-break-before: always; /* FF33 */
}
<div class="grid"> <div class="head">Column 1 (3 items)</div> <div class="data">item 1-1</div> <div class="data">item 1-2</div> <div class="data">item 1-3</div> <div class="head">Column 2 (4 items)</div> <div class="data">item 2-1</div> <div class="data">item 2-2</div> <div class="data">item 2-3</div> <div class="data">item 2-4</div> <div class="head">Column 3 (2 items)</div> <div class="data">item 3-1</div> <div class="data">item 3-2</div> <div class="head">Column 4 (1 items)</div> <div class="data">item 4-1</div> </div>
代码日志版权声明：
翻译自：http://stackoverflow.com/questions/27119691/how-to-start-a-new-column-in-flex-column-wrap-layout
以上所述就是小编给大家介绍的《css – 如何在flex列换行布局中启动一个新列》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
机器学习系统设计
[德] Willi Richert、Luis Pedro Coelho / 刘峰 / 人民邮电出版社 / 2014-7-1 / CNY 49.00
如今，机器学习正在互联网上下掀起热潮，而Python则是非常适合开发机器学习系统的一门优秀语言。作为动态语言，它支持快速探索和实验，并且针对Python的机器学习算法库的数量也与日俱增。本书最大的特色，就是结合实例分析教会读者如何通过机器学习解决实际问题。 本书将向读者展示如何从原始数据中发现模式，首先从Python与机器学习的关系讲起，再介绍一些库，然后就开始基于数据集进行比较正式的项目开......一起来看看 《机器学习系统设计》 这本书的介绍吧!
