flexを使って3カラムにし、しかもorderで順番を並べ替えたhtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flexを使った3カラムのホームページ(順番並べ替えあり)</title>

<link rel="stylesheet" href="style.css">

</head>
<body>

<header>
ヘッダー
</header>

<div class="contents">
<div class="main">
中カラム
</div>
<div class="right">
右カラム
</div>

<div class="left">
左カラム
</div>
</div>

<footer>
フッター
</footer>

</body>
</html>


body{
background-color: lightyellow;
color: #fff;
}
header, footer {height: 100px;}
header {
color: #000;
background: yellow;
}
footer{
background: black;
color: #fff;
/*clear: both;*/
}
.contents {
display: flex;
height: 200px;
}
.main {
background: red;
width: 60%;
order:2;
}
.left {
background: blue;
width: 20%;
order: 1;
}
.right {
background: green;
width: 20%;
order:3;
}
投稿日:
カテゴリー: flex

コメントする

メールアドレスが公開されることはありません。