Issue
I am trying to set width for first child div and second child div of flex container. But it is not working. So, how to set custom width for flex div in css. If anyone know the answer please help to find the solution.
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-child {
flex: 1 0 0;
border: 2px solid green;
width: 100%;
}
.flex-child:first-child {
margin-right: 20px;
width: 70%;
}
.flex-child:nth-child(2) {
margin-right: 20px;
width: 30%;
}
<div class="flex-container">
<div class="flex-child">
<div class="form-section">
<div class="form-area">
<div class="form-label"><label> Name </label></div>
<div class="form-text">Robert</div>
</div>
<div class="form-area">
<div class="form-label"><label>Last Name</label></div>
<div class="form-text">Clav</div>
</div>
</div>
</div>
<div class="flex-child">
<div class="form-section">
<div class="form-area">
<div class="form-label"><label> Name </label></div>
<div class="form-text">Nelson</div>
</div>
<div class="form-area">
<div class="form-label"><label>Last Name</label></div>
<div class="form-text">kumar</div>
</div>
</div>
</div>
</div>
Demo: https://stackblitz.com/edit/github-gb52bu-o1dyda?file=src%2Fapp%2Fapp.component.html
Solution
Flexbox items use a flex: x
for a preferred percentage so instead of width: 70%
or width: 30%
a simple flex: 7
and flex: 3
will suffice and so on.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-child {
flex: 1 0 0;
border: 2px solid green;
}
.flex-child:first-child {
margin-right: 20px;
flex: 7;
}
.flex-child:nth-child(2) {
margin-right: 20px;
flex: 3;
}
<div class="flex-container">
<div class="flex-child">
<div class="form-section">
<div class="form-area">
<div class="form-label"><label> Name </label></div>
<div class="form-text">Robert</div>
</div>
<div class="form-area">
<div class="form-label"><label>Last Name</label></div>
<div class="form-text">Clav</div>
</div>
</div>
</div>
<div class="flex-child">
<div class="form-section">
<div class="form-area">
<div class="form-label"><label> Name </label></div>
<div class="form-text">Nelson</div>
</div>
<div class="form-area">
<div class="form-label"><label>Last Name</label></div>
<div class="form-text">kumar</div>
</div>
</div>
</div>
</div>
Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.