flex-basis
<div id="f1container">
<div class="box box1">1
</div>
<div class="box box2">2
</div>
<div class="box box3">3
</div>
</div>
In style
element
(<style>
) within head
element:
.box {
padding: 2em;
border: medium solid black;
width: 3em;
}
#f1container {
display: flex;
}
.box1 {
flex-basis: 15%;
}
.box2 {
flex-basis: 25%;
}
.box3 {
flex-basis: 50%;
}
.box1 { background-color: lightpink;}
.box2 { background-color: lightsteelblue;}
.box3 { background-color: wheat;}
.box4 { background-color: plum;}
.box5 { background-color: palegreen;}
1
2
3