第一列中的元素将无法在flexbox中正确对齐

Question

我使用flexbox进行页面样式设置，我在容器中使用三列，第二列和第三列仅用于文本，它们看起来不错，但第一列有图像，按钮，链接，文本等等，一切都搞乱了，没有什么是按顺序的，一些元素彼此重叠。我想要新行中的每个新元素，但事实并非如此，文本和链接出现在同一行上尝试<br />，但它只增加了很小的空间并且不会断行。

<style> 
#container{ 
background-color: #EDEDED; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: -moz-flex; 
display: -ms-flex; 
display: flex; 

-webkit-flex-flow: row; 
-ms-flex-flow:row; 
-moz-flex-flow:row; 
flex-flow: row; 

-webkit-flex:1 0 auto; 
-moz-flex:1 0 auto; 
-ms-flex:1 0 auto; 
flex:1 0 auto; 

-webkit-flex-wrap:no-wrap; 
-moz-flex-wrap:no-wrap; 
-ms-flex-wrap:no-wrap; 
    flex-wrap:no-wrap; 

-webkit-order: 1; 
    order: 1; 

    justify-content:flex-start; 
    align-items:flex-start; 
} 
    .column{ 
    padding: 1rem; 
    list-style: none; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    flex-flow:row; 
    -webkit-flex-flow: row; 
    align-content:flex-start; 
    align-items:flex-start; 
    justify-content: space-around; 
    align-self:stretch; 
    flex-wrap: wrap;  
    -webkit-flex-wrap:wrap; 
    } 
    </style> 

<div id='lhs' class='column' style='width:21%;margin:0px 0px 10px 0px;'> // columns starts 
<img src="<?php echo $pic; ?>" /> 

<b style="font-size:15px;"><?php echo $name ?></b><br /> 

<i style="font-size:13px;"><?php echo $info; ?></i> 

<div> 
// php code for calling some functions 
<a href=""></a> 
</div> 

</div>// end of column 

Answer 1

试试这个第一列：

display: flex; flex-direction: column;