css分成两列排序 |js生成随机css

.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 1 50%;
}
/*flex-direction: row; */  /*默认的方向是row，即左到右*/

以上代码中，.parent是容器（即要被分成两列的盒子），设置display:flex让元素呈现flex布局，flex-wrap:wrap使得所有子元素分行排列。.child是放在.parent中的子元素，设置flex:1 1 50%让子元素的宽度占据了.parent的一半。其中，flex:1 1 表示了flex-grow和flex-shrink两个属性，表示在元素占据的空间变化时的自适应。其中，flex-grow表示因为空间的增加而增加时的比例，flex-shrink表示因为空间的减少而减少的比例。

需要注意的是，以上代码的方向是默认的从左到右的方向，即flex-direction:row;。如果想要从上到下的方向，则可以通过把换子元素的宽度为100%来实现。代码如下：

.parent {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.child {
flex: 1 1 100%;
}

这样，放入.parent中的每个子元素都占据了一行，即实现了元素从上到下的布局。