CODEWITHSUNDEEP
cssflexbox
Funny Frontend
Funny Frontend

Reputation: 3925

Flexbox two columns grid not works

Its very simple, I want a two columns grid with flexbox, I read some code examples like this but my code not work.

You can check the flex grid here: https://jsfiddle.net/7ew9rjuq/3/

This is the css:

.mini-product-detail {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}
.mini-product-detail .mini-item {
    border: 1px solid #e0e0e0;
    background-color: #fff;
    margin-bottom: 24px;
    padding: 10px;
    width:50%;
}

Upvotes: 1

Views: 65

Answers (1)

Felix A J
Felix A J

Reputation: 6490

Use flex-wrap: wrap;..

Also used box-sizing: border-box; for the items.

 .mini-product-detail {
display: -ms-flex;
display: -webkit-flex;
display: flex;
  flex-wrap: wrap;
}
.mini-product-detail .mini-item {
border: 1px solid #e0e0e0;
background-color: #fff;
margin-bottom: 24px;
padding: 10px;
width: 50%;
box-sizing: border-box;
 }
<div class="mini-product-detail">
								
	<div class="mini-item"></div>
	<div class="mini-item"></div>
	<div class="mini-item"></div>
	<div class="mini-item"></div>

Upvotes: 3

Related Questions