Search code examples
htmlcssflexbox

CSS Flex Container - Justify Content

I have below html code, I am facing while justifying content.

<style>
flex-container {
 display: flex;
}
</style>
<div class = "content" style="border: 2px solid;">

<flex-container>
  <flex-item class="flex1">
     <div>
    <table>
     <tr><th>1</th><td>Left line1</td></tr>
    <tr><th>2</th><td>Left line2</td></tr>
   <tr><th>3</th><td>Left line3</td></tr>
   <tr><th>4</th><td>Left line4</td></tr>
    </table>
    </div>
</flex-item>

<flex-item class="flex2">
    <div>
     <table>
     <tr><th>1</th><td>Right line1</td></tr>
    <tr><th>2</th><td>Right line2</td></tr>
   <tr><th>3</th><td>Right line3</td></tr>
   <tr><th>4</th><td>Right line4</td></tr>
    </table>
    </div>
</flex-item>

<flex-container>
<table style = "border: 1px solid black;">
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    <th>Column4</th>
    <th>Column5</th>
    
     <tr>
        <td>Data1 for Column1</td>
        <td>Data1 for Column2</td>
        <td>Data1 for Column3</td>
        <td>Data1 for Column4</td>
        <td>Data1 for Column5</td>
     </tr>
<tr>
        <td>Data2 for Column1</td>
        <td>Data2 for Column2</td>
        <td>Data2 for Column3</td>
        <td>Data2 for Column4</td>
        <td>Data2 for Column5</td>
     </tr>
    
</table>
</flex-container>

</div>

Current result is, enter image description here

Expected result,

enter image description here

Was trying using justify content method, unable to get it aligned. Any suggestion would be appretiated

.flex1 {
    justify-content: flex-start;
}
.flex2 {
    justify-content: flex-end;
}
Solution

  • Parent of "flex-items" are "flex-container" so when you want to justify content, you should place the "justify-content:space-between" to the parent container not the child itself.

    Besides, for the bottom container, you should set width as 100% for the table if you want to make it expand to the width of viewport as parent container has "display:flex" style. Maybe you could change the bottom table container's to "flex-item" for consistency and easier for you to manage the styling.

    flex-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-3{
  width: 100%;
}

.flex-3 table{
  width:100%; 
}
    <div class = "content" style="border: 2px solid;">
  <flex-container>
    <flex-item class="flex1">
      <div>
        <table>
          <tr><th>1</th><td>Left line1</td></tr>
          <tr><th>2</th><td>Left line2</td></tr>
          <tr><th>3</th><td>Left line3</td></tr>
          <tr><th>4</th><td>Left line4</td></tr>
        </table>
      </div>
    </flex-item>

    <flex-item class="flex2">
      <div>
        <table>
          <tr><th>1</th><td>Right line1</td></tr>
          <tr><th>2</th><td>Right line2</td></tr>
          <tr><th>3</th><td>Right line3</td></tr>
          <tr><th>4</th><td>Right line4</td></tr>
        </table>
      </div>
    </flex-item>
    
    <flex-container class="flex-3">
      <table style = "border: 1px solid black;">
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
        <tr>
          <td>Data1 for Column1</td>
          <td>Data1 for Column2</td>
          <td>Data1 for Column3</td>
          <td>Data1 for Column4</td>
          <td>Data1 for Column5</td>
        </tr>
        <tr>
          <td>Data2 for Column1</td>
          <td>Data2 for Column2</td>
          <td>Data2 for Column3</td>
          <td>Data2 for Column4</td>
          <td>Data2 for Column5</td>
        </tr>
      </table>
    </flex-container>
  </flex-container>
</div>