Flexboxは
display: flex;から始まります。下のサンプルでは、よくありがちな「横置きメニュー」と「伸縮可能なカラムを持つテーブル」を実現しています。
<html>
<style>
/* general horizontal menu */
nav > ul {
display: flex;
padding: 0px;
background-color: gray;
}
nav > ul > li {
min-width: min-content;
/* Prevent items from getting too small for their content. */
padding: 4px;
list-style-type: none;
background-color: cyan;
}
nav > ul > #login {
margin-left: auto;
}
/* row */
div.row {
display: flex;
}
div.row > .fixCol {
width: 100px;
background-color: yellow;
}
div.row > .flexCol1 {
flex: 1.0;
background-color: green;
}
div.row > .flexCol2 {
flex: 2.0;
background-color: lightgreen;
}
</style>
<body>
<nav>
<ul>
<li><a href="/about">About</a>
<li><a href="/projects">Projects</a>
<li><a href="/interact">Interact</a>
<li id='login'><a href="/login">Login</a>
</ul>
</nav>
<div class="row">
<div class="fixCol">fixCol</div>
<div class="flexCol1">flexCol1</div>
<div class="flexCol2">flexCol2</div>
</div>
<div class="row">
<div class="fixCol">fixCol</div>
<div class="flexCol1">flexCol1</div>
</div>
<div class="row">
<div class="fixCol">fixCol</div>
<div class="flexCol1">flexCol1</div>
<div class="fixCol">fixCol</div>
</div>
</body>
</html>注目
上の
flex: 1.0;はカラム幅の比率を表しています。例えば一つの行に flex:1.0 と flex:2.0 なカラムが一つづつ存在するとすれば、カラム幅は1:2の比率でレイアウトされます。サンプルを実行するとこのように表示されます。
画面の幅を変えてみましょう。fixColは固定されたままですが、flexCol1とflexCol2は画面幅にあわせて伸縮します。
flexboxを使えばスタイルシートがかなりスッキリしますね。
0 件のコメント:
コメントを投稿