Issue
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>
Expected result,
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>
Answered By - EQ0920
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.