Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>What you need is called as Flex-Box (flexible box) model. It is not implemented in all the browsers. For testing purposes, yeah, you can go ahead with the following CSS.</p> <p><strong>CSS</strong></p> <pre><code>ul li { display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box; -moz-box-orient: horizontal; display: box; box-orient: horizontal; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } </code></pre> <p>You can see basic and advanced examples at <a href="http://www.html5rocks.com/en/tutorials/flexbox/quick/" rel="nofollow noreferrer">Quick hits with the Flexible Box Model</a>.</p> <hr> <p><strong>Flexbox Model Layouts</strong></p> <p>Normal Box<br /> <a href="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex01.gif.pagespeed.ic.I78_V3_QCI.webp" rel="nofollow noreferrer">http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex01.gif.pagespeed.ic.I78_V3_QCI.webp</a><br /> Flexbox for the last one<br /> <a href="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex02.gif.pagespeed.ic.sSh_w3N6ER.webp" rel="nofollow noreferrer">http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex02.gif.pagespeed.ic.sSh_w3N6ER.webp</a><br /> Flexbox for last two<br /> <a href="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex03.gif.pagespeed.ic.QuC9JhvmNd.webp" rel="nofollow noreferrer">http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex03.gif.pagespeed.ic.QuC9JhvmNd.webp</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload