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中的每個子元素都占據了一行，即實現了元素從上到下的布局。