flexboxを使ってコンテンツを横並びにする。
スマホ(640px以下)は縦にするときのコード。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"></script> <style type="text/css"> body{ padding: 0px; margin: 0px; } .row{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction:column; margin: 0px; padding: 0px; } .row li { flex-basis: 15%; background-color: grey; margin: 0px; padding: 0px; list-style: none; padding: 10px; } @media (min-width: 640px) { .row{ flex-direction:row; } } </style> </head> <body> <ul class="row"> <li>1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト</li> <li>2テキスト2テキスト2テキスト2テキスト</li> <li>3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト</li> <li>4テキスト4テキスト4テキスト4テキスト4テキスト4テキスト</li> <li>5テキスト5テキスト5テキスト</li> </ul> </body> </html>
サンプルではモバイルファーストの組み方にしているので、
flex-direction: row;で横並び、flex-direction:column;で縦並びにする。
ただandroid4くらいではflex-directionが効かない機種もあるようなので、
古いandroidでも正確に表示したい場合は、divで並べたほうが良い。
justify-content: space-between;で等間隔でならべる。