Menu
.flex {
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
} <div class="flex">
<div class="child">
<svg></svg>1
</div>
<div class="child">
<svg></svg>2
</div>
<div class="child">
<svg></svg>3
</div>
</div>Currently the width of the child divs is determined by the size of the svg. I would like them to take up all available room in the row, so that there are three divs each taking 33% width. Can I do this with flexbox?
764
Use the flex-grow property to make a flex item consume free space on the main axis. This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent.
what you are looking for is the 'align-content' property which is default set to 'stretch' and justifies elements vertically (the cross-axis). Opposed to 'justify-content', default 'flex-start' which justifies elements horizontally (main-axis). 'align-self', default 'auto', can be used to control individual items.
You do this simply by setting flex-grow on each flex-item's, in your case child's, css. Like this:
.child{
background: lightblue;
flex-grow: 1;
}
Complete Example: (parent component needs to be display: flex, I removed the irrelevant wrap and justify-content)
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
.flex {
display: flex;
}
.child {
background: orange;
height: 50px;
border: 1px blue dashed;
flex-grow: 1;
}
</style>
</head>
<body>
<h1>How to fill horizontal space in line of flex children</h1>
<div class="flex">
<div class="child">
<svg>
</div>
<div class="child">
<svg>
</div>
<div class="child">
<svg>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
