How to create flexible div items that break after the line?


Tags: html,css

Problem :

I am trying to create "shopping items" embedded in a div that have a certain fixed width and height. I know that you can do display: inline !important; to keep the div's on one line.

However, how can I make it such that it breaks when the window size becomes smaller, preferably when the outer div is smaller?

Here is an illustration: enter image description here

Here is what I tried:

<div class="row">
            <div class="col-sm-12">

                <div class="items">
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                   <div class="item">
                       <p>Hello</p>
                   </div>
                </div>

            </div>
        </div>

and css:

.items {
    display: flex !important;
    flex-wrap: wrap !important;
    -webkit-flex-wrap: wrap !important;
    -moz-flex-wrap: wrap !important;
    -o-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
}
.item {
    width: 200px !important;
    height: 500px !important;
    margin: 10px !important;
    text-align: center !important;
}


Solution :

With flex you can also set a breaking point (without mediaquerie) when boxes reaches 200px of width and also span them on the whole line:

(bootstrap included in snippet , i do not really see troubles there)

.row {
  text-align: center;
}

.items {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.item {
  /* with a breaking point at 200px width */
  min-width: 200px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* or without min-width nor flex, just:
  width:200px; it will wrap everytime needed and boxes will keep a static width */
  height: 150px;/* none or whatever*/
  margin: 10px 30px;/* whatever*/
  text-align: center;
  border: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-12">
    <div class="items">
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
      <div class="item">
        <p>Hello</p>
      </div>
    </div>

  </div>
</div>


    CSS Howto..

    How to centre a div vertically and horizontallly?

    How to selectively load/use CSS for YUI modules?

    How to Fix this CSS and Center the Menu Horizontally?

    How to select a non unique element through CSS

    How to use regex to match css elements

    How to wrap text in a element in IE

    How do I add a CSS class to a BoundField, so I can find it with jQuery?

    How do I create a cut-out hexagon shape?

    How to apply a sifr rule to a hyperlink and also its a.active counterpart

    How to show borders of th elements with gradient fills in IE9?

    how to align an element but keep the space it left reserved

    How to displaying and hiding again the div after clicking a button

    How do you make a filter for images that have tags?

    How to delete space in css?

    Show a specific image on click

    How to scroll to particular element using CSS/JS

    How can I get this menu to hug the top of the page, widen out, and provide some space below it?

    How to place 3 different paragraphs next to each other?

    how to apply css on dynamic loaded html content (jquery mobile+backbone+phonegap)

    How do I overlay a gradient (background) on top of a border?

    How to override css for giving background image?

    How to position a drop down list nav bar inside header in html css

    How to scale down retina image sprite with css

    How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    How to move the jQueryUI close button on the dialog over the top of top right corner?

    How to apply Hovering on html area tag?

    How to remove default border of button in jquery mobile?

    How to make a content div stretch from a header div to a footer div?

    How to center div and ul using CSS?

    How to apply css styles to dynamic JavaScript array?