art2nd
https://blog.hatena.ne.jp/art2nd/
晴歩雨描
https://2ndart.hatenablog.com/
ホームページ、Web作成
Webページで写真/画像を横並びにする方法として、以前は display: inline-block; display: table-cell; float: left; などを使っていた。どれもあまり使いやすいとは言えなかった。 CSS3から新しいレイアウトモジュールとして、flexbox display: flex; が追加された。この「display:flex;」を使えば、画像を簡単に横並びにできる。<div>に「display:flex;」を指定するだけで<div>内の画像は横並びになる。 <style> .box-row { display: -webkit-box; display…
190
<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2F2ndart.hatenablog.com%2Fentry%2F2019%2F06%2F15%2F112639" title="CSSのflexbox（display:flex;）で、写真/画像を横並びにする。inline-blockやfloat:leftは使わない。＋ <div>の横幅一杯に画像を並べてリサイザブル（レスポンシブ）にする。 - 晴歩雨描" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe>
https://cdn-ak.f.st-hatena.com/images/fotolife/a/art2nd/20190615/20190615110247.jpg
Hatena Blog
https://hatena.blog
2019-06-15 11:26:39
CSSのflexbox（display:flex;）で、写真/画像を横並びにする。inline-blockやfloat:leftは使わない。＋ <div>の横幅一杯に画像を並べてリサイザブル（レスポンシブ）にする。
rich
https://2ndart.hatenablog.com/entry/2019/06/15/112639
1.0
100%