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

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.

htmlcssflexbox


Solution 1:[1]

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.

Solution 2:[2]

html:

<div class="LabelColumn">label column</div>
<div class="DataColumn">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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Martin Lévai
Solution 2 DeveloperInSky

Related Questions