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;

第一列中的元素未在flexbox中正确对齐

1 个答案: