How to make wrap divs without display: inline-block;?-CodePudding

So I want the inner divs outside the outer div to wrap according to the width of the outer div, which in turn expands and contracts according to the width of the browser window. I know that I can use display: inline-block; to make the divs wrap around each other but when they do that the divs don't get centered horizontally. text-align: center; and assigning display: flex; justify-content: center; doesn't work.

CodePudding user response：

Maybe you just need to add flex-wrap: wrap; to the container so the inner divs start wrapping.

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

Here is a working demo.

CodePudding user response：

html:

<div >label column</div>
<div >data column</div>

css:

div.LabelColumn
{
    padding: 10px;
    width: 150px;
    float: left;
    margin:10px;
    border:1px solid #333;
}

div.DataColumn
{
    padding: 10px;
    width: 150px;
    float: left;
    margin:10px;
    border:1px solid #333;
}

here you can see one example, I think it will help you.