flexboxの使い方

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;で等間隔でならべる。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です