<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>練習1113</title>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<link href=”style_flex.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<divclass=”container”>
<divclass=”item”>item1</div>
<divclass=”item”>item2</div>
<divclass=”item”>item3</div>
<divclass=”item”>item4</div>
<divclass=”item”>item5</div>
<divclass=”item”>item6</div>
<divclass=”item”>item7</div>
<divclass=”item”>item8</div>
</div>
<divclass=”container2″>
<divclass=”item”>item1</div>
<divclass=”item”>item2</div>
<divclass=”item”>item3</div>
<divclass=”item”>item4</div>
</div>
<divclass=”container3″>
<divclass=”item”>
<imgsrc=”images/dummy.png”width=”728″height=”350″alt=””/>
<h3>WANDS</h3>
<p>WANDSのプロフィールを詳しく紹介します。</p>
</div>
<divclass=”item”>
<imgsrc=”images/dummy.png”width=”728″height=”350″alt=””/>
<h3>ZARD</h3>
<p>ZARDのプロフィールを詳しく紹介します。</p>
</div>
<divclass=”item”>
<imgsrc=”images/dummy.png”width=”728″height=”350″alt=””/>
<h3>大黒摩季</h3>
<p>大黒摩季のプロフィールを詳しく紹介します。</p>
</div>
</div>
</body>
</html>
@charset “UTF-8”;
.container {
display: flex; /* 横並び */
flex-flow: rowwrap ;
background: #A7F0FE; /*背景色 */
padding: 20px0; /*内側の余白上下20px; */
justify-content: space-between;
}
.container .item {
background: #00456D; /* 背景色 */
color:#fff; /* 文字色 */
width: 24%;
text-align: center; /* 中心寄せ */
margin-bottom: 20px;
}
/* スマホ幅の時は以下の内容に変更する*/
@media (max-width:550px){
.container.item {
width: 100%;
}
}
.container2 {
display: flex; /* 横並び */
flex-flow: row;
background: #A7F0FE; /*背景色 */
padding: 20px0; /*内側の余白上下20px; */
justify-content: space-around;
}
.container2 .item {
background: #00456D; /* 背景色 */
color:#fff; /* 文字色 */
width: 24%;
text-align: center; /* 中心寄せ */
}
.container3 {
display: flex;
justify-content: space-between;
width:1080px;
margin: 0auto;
}
.container3 .item img {
max-width: 100%;
}
