Click here to Skip to main content
13,704,528 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
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>
Posted 29-Oct-15 22:06pm

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web01-2016 | 2.8.180920.1 | Last Updated 30 Oct 2015
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100