Ku Nole Ku Nole - 1 month ago 6
HTML Question

How to make one bring using down?

I have the following to be displayed in, so in the first row: One Two, second row: Three Four, third row: Five.

How can I do so with will be sure to accept the answer.

<div>
<div>Four</li>
<div>Five</li>
</div>

Answer

One relatively simple solution is to use the flex-box approach:

/* Setting up the basic 'default' display
   options: */
ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  /* display: flex sets up the <ul> element
     to contain flex-items: */
  display: flex;
  /* this establishes whether the model should
     be row-based or column-based: */
  flex-direction: row;
  /* stretches the flex-items (the <li>) to
     fill the space: */
  align-items: stretch;
  /* defines whether the children may, or may
     not, wrap to a new line: */
  flex-wrap: nowrap;
}
li {
  display: flex-item;
  /* 0:   'flex-grow',
          the amount by which the particular
          element may grow, relative to its
          siblings.
  
     1:   'flex-shrink',
          the amount by which the element
          may shrink relative to its
          siblings.
  
     20%: 'flex-basis',
          the initial width of the particular
          element relative to its container.
  */
  flex: 0 1 20%;
  border: 2px solid #000;
  border-radius: 0.5em;
  line-height: 2em;
  text-align: center;
}
@media screen and (max-width: 600px) {
  ul {
    /* we want the elements to wrap to
       new lines at this point, so we
       change 'nowrap' to 'wrap': */
    flex-wrap: wrap;
  }
  li {
    /* here, the flex-grow is set to 2,
       meaning that an element can grow
       to twice the size of a sibling,
       flex-shrink remains the same, and
       flex-basis is now 50%, because we
       want either one or two (at most)
       elements per line: */
    flex: 2 1 50%;
  }
}
@media screen and (max-width: 200px) {
  ul {
    flex-wrap: wrap;
  }
  li {
    /* while you didn't specify an alternate
       view rule for smaller screen widths, I
       added this to show how flex-boxes can
       be used to switch to a one-element per
       row alternative at tiny widths, simply
       by setting the flex-basis to 100%: */
    flex: 0 1 100%;
  }
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

JS Fiddle demo.

Of course, the above assumes that you would like the <li> element alone on its own row to have the full width of that row; if that's not the case then you can simply replace the flex: 2 1 50% line with flex: 0 1 50%, which will prevent the item on a row by itself from growing in relation to its siblings.

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
}
li {
  display: flex-item;
  flex: 0 1 20%;
  border: 2px solid #000;
  border-radius: 0.5em;
  line-height: 2em;
  text-align: center;
}
@media screen and (max-width: 600px) {
  ul {
    flex-wrap: wrap;
  }
  li {
    flex: 0 1 50%;
  }
}
@media screen and (max-width: 200px) {
  ul {
    flex-wrap: wrap;
  }
  li {
    flex: 0 1 100%;
  }
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

JS Fiddle demo.

References: