使用flex设置网页样式。 [英] Styling web pages using flex.

问题描述

我使用flexbox来设置我的页面样式，我在容器中使用三列，第二列和第三列仅用于文本，它们看起来很棒但是第一列有图像，按钮，链接，文本等，所有内容都搞砸了没有什么是有序的，有些元素相互重叠。我想要新行中的每个新元素，但事实并非如此，文本和链接出现在同一行试过但它只是增加了一点空间而且没有断线。

＃容器 {
  background-color  < span class =code-keyword>：  #EDEDED;  
  display  ：  -ms-flexbox;  
  display  ：  -webkit-flex;  
  display  ：  -moz-flex;  
  display  ：  -ms-flex;  
 显示 ：  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;  
 订单 ：  1;  
 
  justify-content  ：  fle x-start;  
  align-items  ：  flex-start;  
} 
。列 {
  padding  ：  1rem;  
  list-style  ：  none;  
  display  ：  -webkit-box;  
 显示 ：  -moz-box;  
  display  ：  -ms-flexbox;  
  display  ：  -webkit-flex;  
  display  ：  flex;  
  flex-flow  ：  row;  
   -  webkit-flex-flow  ： 行;  
  align-content  ：  flex-start;  
  align-items  ： < span class =code-keyword> flex-start;  
  justify-content  ：  space-around;  
  align-self  ： 拉伸;  
  flex-wrap  ：  wrap;  
   -  webkit-flex-wrap  ：  wrap;  
} 

 <   div     id   ='  lhs'    class   =' 列'    style   ='  width：21％; margin：0px 0px 10px 0px;' >  
 <   img     src   = <？php echo $ pic ; ？>      /  >  
 
 <   div  >  
 <   p  >  <？ php  echo   $ name  ？>  < ;   / p  >  <   br     /  >  
 <   p  >  <？ php  echo   $信息; ？>  <   / p  < span class =code-keyword>>  
 <   / div  >  
 <   div  >  
 //用于调用某些函数的php代码
 <   a     href   =  >  <   / a  >  
 <   / div  >  
 
 < span class =co解除关键字><   / div  >  

解决方案

pic; ？> / >

< div >
< p > <？ php echo

name ？> < span class =code-keyword>< / p > < br / >
< p > <？ php echo

info ; ？> < / p < span class =code-keyword>>
< / div >
< div >
//用于调用某些函数的php代码
< a href = > < / a >
< / div >

< span class =co解除关键字>< / div >

I am using flexbox for styling my pages, I am using three columns in container, second and third columns are just for text and they look great but First column has images, buttons, links,text etc and everything is messed up here nothing is in order, some elements are overlaying each other. I want every new element in new line but that's not so, text and links appear on same line tried
but it just adds little space and doesn't break line.

#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;
   }

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

<div>
<p><?php echo $name ?></p><br />
<p><?php echo $info; ?></p>
</div>
<div>
// php code for calling some functions
<a href=""></a>
</div>

</div>

解决方案

pic; ?>" /> <div> <p><?php echo

name ?></p><br /> <p><?php echo

info; ?></p> </div> <div> // php code for calling some functions <a href=""></a> </div> </div>

这篇关于使用flex设置网页样式。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！