Webサイト制作科 白描

Web 白描 求職者支援訓練 Webサイト制作科 12月7日開講クラス補足メモ

レスポンシブなFlexbox - 実例

実例

f:id:web-0220:20190123024537j:plain

f:id:web-0220:20190123024614j:plain

f:id:web-0220:20190123024752j:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Flexboxの練習</title>
<style>
html,body,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  width: 100%;
}
.content {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 50px auto;
}
li {
  flex: 1 0 200px;
  margin: 1%;
}
</style>
</head>
<body>
<ul class="content">
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
</ul>
</body>
</html>


f:id:web-0220:20190123025508j:plain

f:id:web-0220:20190123025524j:plain

f:id:web-0220:20190123025634j:plain

f:id:web-0220:20190123025838j:plain

f:id:web-0220:20190123025850j:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>レスポンシブなFlexbox</title>
<style>
img {
  max-width: 100%;
}
.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ddd;
  padding: 0.4em;
  margin: 0 0 2em;
}
.item{
  background: #ddd;
  padding: 1em;
  flex: 1 0 200px;
  margin: 0.4em;
}
</style>
</head>
<body>
<div class="content">

<h1>レスポンシブなFlexbox</h1>
<p>Flexboxを使うとメディアクエリを書かなくても、レスポンシブなレイアウトが実現できます。</p>

<div class="container">

<div class="item">
<h3>アイテム1</h3>
<img src="img/01.jpg" alt="">
<p>アイテム1を解説する文章。</p>
</div><!-- /.item -->

<div class="item">
<h3>アイテム2</h3>
<img src="img/02.jpg" alt="">
<p>アイテム2を解説する文章。アイテム2を解説する文章。アイテム2を解説する文章。アイテム2を解説する文章。</p>
</div><!-- /.item -->

<div class="item">
<h3>アイテム3</h3>
<img src="img/03.jpg" alt="">
<p>アイテム3を解説する文章。アイテム3を解説する文章。</p>
</div><!-- /.item -->

<div class="item">
<h3>アイテム4</h3>
<img src="img/04.jpg" alt="">
<p>アイテム4を解説する文章。</p>
</div><!-- /.item -->

<div class="item">
<h3>アイテム5</h3>
<img src="img/05.jpg" alt="">
<p>アイテム5を解説する文章。アイテム5を解説する文章。アイテム5を解説する文章。アイテム5を解説する文章。</p>
</div><!-- /.item -->

</div><!-- /.container -->

</div><!-- /.content -->
</body>
</html>