CODEWITHSUNDEEP
htmlcssflexbox
pear
pear

Reputation: 131

Why does my flex-wrap have large gaps and why does it change the flex-direction to a column?

so when learning to use flex-box I noticed that my flex-wrap:wrap is positioned in a really weird way, depending on the viewpoint it have large gaps between the boxes.

Also for some reason the flex-direction is column:

Extra spacing for some reason

Also here's the code: 

.cont {
  display: flex;
  border: purple solid;
  flex-wrap: wrap;
}

.cont div {
  padding: 10px;
  flex-basis: 300px;
  background: linear-gradient(45deg, rgb(233, 47, 124), rgb(9, 175, 92));
}
<div class="cont">
  <div class="box4">
    <h1>Box4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box5">
    <h1>Box5</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box6">
    <h1>Box6</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box7">
    <h1>Box7</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box8">
    <h1>Box8</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box9">
    <h1>Box9</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box10">
    <h1>Box10</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Upvotes: 3

Views: 4657

Answers (3)

Mohana Naga Venkat Sayempu
Mohana Naga Venkat Sayempu

Reputation: 876

The flex-wrap property specifies whether the flexible items should wrap or not. In your case you have given flex-basis:300px and padding:10px, so each box width will be flex-basis + padding-left + padding-right = 300+10+10 = 320px(since you didn't set box-sizing:border-box padding will be included in width).

In your case the div.cont width is not enough for three boxes(320*3=960px) to sit there. So your box is wrapped onto next line. If you want to display three boxes in a row.

.cont div{
  padding:10px;
  flex-basis:calc(100% - 20px);
}

modified version of your code http://jsbin.com/luqevob/1/

Upvotes: 0

Mario V&#225;zquez
Mario V&#225;zquez

Reputation: 777

As pointed out by pfcodes, your items just don't fit in the row and therefore are wrapped. Additionally, when you use flex-wrap you should consider the align-content property. You can think of it as the alignment for the cross axis when items wrap. In your case, as flex direction is row (the default), align-content will affect the vertical alignment of the wrapped lines. It takes the value stretch by default.

Take a look at this helper tool for a better understanding and testing over flexbox.

Upvotes: 1

pfcodes
pfcodes

Reputation: 1086

flex-wrap makes it so that the overflow of one row will wrap into a new row. The reason why it's overflowing so early leaving a big gap to the right is because the flex items are too wide to fit evenly into the container. Try decreasing the flex-basis value.

Upvotes: 1

Related Questions