javascript - CSS : Justify child divs with variable width

Question

如何在固定宽度的父 div 中调整宽度可变的子 div。我不仅想在单行上而且在整个父容器内调整子 div。
父元素和子元素是动态生成的。

<div class="parent">
    <div class="child">1.2345</div>
    <div class="child">1:223345</div>
    <div class="child">1:23421225</div>
    <div class="child">1:2345</div>
    <div class="child">1:235</div>
    <div class="child">1:2345</div>
    .
    .
    .
    30 Child elements
</div> 

CSS

.parent{
    width:450px;
    text-align:justify;
}
.child{
    float: left;
    margin: 2px;
}

输出是这样的

已更新
现在我已经根据文本长度为每个子 div 设置了宽度。

Answer 1

  .parent{
	width:250px;
	text-align:justify;
	border: 1px solid #ddd;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.child{
	margin: 2px;
}

<div class="parent">
        <div class="child">1.2345</div>
        <div class="child">1:2345</div>
        <div class="child">1:2345</div>
        <div class="child">1:2345</div>
        <div class="child">1:2345</div>
        <div class="child">1:2345</div>
        . . . 30 Child elements
    </div>

demo add 30 +