Allow inline block elements to stretch fluidly and collapse and stack as viewports shrink

问题

Given the following code, I would like to find a way to have a series of inline-block elements stretch the full width of the parent element while stacking on top of each other as the line wraps.

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Example

If all children have the same min-width, I want this to create a grid effect. For example, on larger screens, the children may stack 5 across until they wrap onto a second line. I would like those all to be 20% (1/5) of the available width. As the screen shrinks, the fifth and 10th items wrap leaving two rows of 4 items and a third row of 2 items. Now I would like to have the children all stretch 25% (1/4) of the available width except for the last row of two children. Those should be 50% each.

Attempts

I've tried floating the children, making them inline-blocks and I've experimented with flex-box, but none of them are giving me the result I desire. Inline-blocks have come the closest, allowing them to stack as with parent width shrinks, but I can't achieve the stretching.

Restrictions

I'd prefer not to use media queries as I would then need to write in the exact breakpoints for this example then alter all of them if anything changes in the site layout. I'd like to find a more organic way to solve this problem.

Javascript is out. I want to find a way to do this with just CSS.

回答1:

Many thanks to Chris Coyier and CSS Tricks. Flexbox is indeed the answer. Rather than copy and paste his solution, here's the link to his Pen: http://codepen.io/chriscoyier/pen/yCeax. If you are interested in his whole thought about it, here is the blog post to it: http://css-tricks.com/filling-space-last-row-flexbox/

Here's the actual solution, just in case the CodePen goes away.

HTML

<button id="add">Add Child</button>

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

* {
  box-sizing: border-box;  
}

#parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 50px;
  background: red;
  flex: 1;
  min-width: 25%;
  border: 5px solid white;
}

@media (max-width: 700px) {
  .child {
    min-width: 33.33%; 
  }
}

@media (max-width: 400px) {
  .child {
    min-width: 50%; 
  }
}

jQuery

$("#add").on("click", function() {
  $("#parent").append("<div class='child' />");
});

来源：https://stackoverflow.com/questions/22099394/allow-inline-block-elements-to-stretch-fluidly-and-collapse-and-stack-as-viewpor

标签

responsive-design

css