I have integrated Flex Grid into my Angular7 project. In the initial state, I am able to display two p-col-6 elements side by side without any issues. However, when I try to rearrange them in p-col-12, they no longer align properly. Here is a detailed explanation of the problem:
#status 1:
<style>
.p-grid {
border: 2px solid red;
padding: 10px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.p-col-6 {
box-sizing: border-box;
padding: 20px;
border: 2px solid green;
flex: 1 0 50%;
margin-bottom: 5px;
max-width: 50%;
}
</style>
<div class="p-grid">
<div class="p-col-6">
</div>
<div class="p-col-6">
</div>
<div class="p-col-6">
</div>
<div class="p-col-6">
</div>
</div>
https://i.stack.imgur.com/zC1AP.png
In this scenario, everything displays correctly. However, the issue arises when trying to replicate the layout below:
#status 2:
<style>
* {
-webkit-box-sizing: border-box;
}
.p-grid {
border: 2px solid red;
padding: 10px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.p-col-6 {
box-sizing: border-box;
padding: 20px;
border: 2px solid green;
flex: 1 0 50%;
margin-bottom: 5px;
max-width: 50%;
}
.p-col-12 {
box-sizing: border-box;
padding: 20px;
border: 2px solid green;
flex: 1 0 100%;
margin-bottom: 5px;
max-width: 100%;
}
</style>
<div class="p-grid">
<div class="p-col-12">
<div class="p-col-12">12</div>
</div>
<div class="p-col-12">
<div class="p-col-12">12</div>
</div>
<div class="p-col-12">
<div class="p-col-6">
6
</div>
<div class="p-col-6">
6
</div>
</div>
</div>
The col-6 elements do not align side by side even after adjusting width properties. Any suggestions on how to resolve this?