CODEWITHSUNDEEP
htmlcssflexbox
Ramūnas Pabrėža
Ramūnas Pabrėža

Reputation: 604

flex box layout combine three elements in one column

my issue is in image: issue

a need to arrange three small elements in one column besides big one.

sample html:

<div class="container">
    <div class="big_element"></div>
    <div class="small_element"></div>
    <div class="small_element"></div>
    <div class="small_element"></div>
</div>

and the CSS:

.container {
    display: flex;
    flex-direction: row; width: 496px;
}
.big_element, .small_element {
    display: flex;
    width: 248px;
}

Upvotes: 3

Views: 3326

Answers (2)

Tarek.hms
Tarek.hms

Reputation: 1283

There is many ways but I think the best two ways are either using TABLE instead of DIVs or by Flexbox:

Using table:

table{
height: 200px;
width: 200px;
border: 0;
}
tr{
 border: 1px black solid;
}
<table border="1" cellpadding="0" cellspacing="10px">
   <tr>
      <td rowspan="3"></td><td></td>
   </tr>
   <tr>
      <td></td>
   </tr>
   <tr>
      <td></td>
   </tr>
</table>

Flexbox:

.wrapper {
display: -webkit-flex;
display: flex;

-webkit-flex-flow: column wrap; /* Safari 6.1+ */
flex-flow: column wrap;
  
font-weight: bold;
text-align: center;

height: 200px;
width: 200px;
padding: 5px;
}

.wrapper > div{
border: 1px black solid;
-webkit-flex-grow: 1;
flex-grow: 1;
margin: 5px;
}
.left{
-webkit-flex-basis: 100%;
flex-basis: 100%;
}
<div class="wrapper">
   <div class="left">&nbsp;</div>
   <div class="aside">&nbsp;</div>
   <div class="aside">&nbsp;</div>
   <div class="aside">&nbsp;</div>
</div>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122095

You can do this with nested Flexbox

body, html {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.big_element, .small_element {
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
  flex: 1;
}

.right {
  display: flex;
  flex: 1;
  flex-direction: column;
}
<div class="container">
    <div class="big_element"></div>
    
    <div class="right">
      <div class="small_element"></div>
      <div class="small_element"></div>
      <div class="small_element"></div>
    </div>
</div>

Upvotes: 2

Related Questions