- float の代わりに display: flex を使う。
- 横並びさせたいアイテムを入れる箱を作る。<div id="flexBox">を作る。
- <li>を並べたいのであれば,<ul>をそのまま使ってもよい。
- flexboxにあたる要素に。display: flex;とcssに記述すればおしまい。
- そうすると、中の子要素がすべて横に並ぶ。
- 親要素の幅に関係なく、とにかく横一列に並ぶ。
- #flexBox{display: flex;}
- 使用前
- 使用後
css
@charset "utf-8";
/* CSS Document */
html, body, div, img{
margin: 0;
padding: 0;
line-height: 1.0;
}
img{
width:150px;
vertical-align: bottom;
}
#flexBox{
width:600px; flexBoxの横幅を指定しても、お構いなしでとにかく横一列！
display: flex;
}
html
<title>flexBox</title>
</head><body>
<div id="flexBox">
<div class="box"><img src="img/clover-blue.jpg"></div>
<div class="box"><img src="img/clover-green.jpg"></div>
<div class="box"><img src="img/clover-pink.jpg"></div>
<div class="box"><img src="img/clover-red.jpg"></div>
<div class="box"><img src="img/dia-blue.jpg"></div>
<div class="box"><img src="img/dia-green.jpg"></div>
<div class="box"><img src="img/dia-pink.jpg"></div>
<div class="box"><img src="img/dia-red.jpg"></div>
<div class="box"><img src="img/heart-blue.jpg"></div>
<div class="box"><img src="img/heart-green.jpg"></div>
<div class="box"><img src="img/heart-pink.jpg"></div>
<div class="box"><img src="img/heart-red.jpg"></div>
</div>
</body>
</html>
