webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

display: flex;

  • float の代わりに display: flex を使う。
  • 横並びさせたいアイテムを入れる箱を作る。<div id="flexBox">を作る。
  • <li>を並べたいのであれば,<ul>をそのまま使ってもよい。
  • flexboxにあたる要素に。display: flex;とcssに記述すればおしまい。
  • そうすると、中の子要素がすべて横に並ぶ。
  • 親要素の幅に関係なく、とにかく横一列に並ぶ。
  • #flexBox{display: flex;}
  • 使用前

f:id:ohta-felica:20160611144240p:plain

  •  使用後

f:id:ohta-felica:20160611144341p:plain

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>