またもやflex
＜結論＞
flex使うアイテムには、flex-shrink: 0;を指定する
＜本文＞
今回は前回のを改変
ヘッダーにログアウトボタンとかつけるために flex in flex にしてみたわけですよ
<body>
<header>
<h1>ヘッダー</h1>
<span>名前</span>
<button>ログアウト</button>
</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</body>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
header {
display: flex;
}
header > h1 {
flex: 1;
}
＜結論＞
flex使うアイテムには、flex-shrink: 0;を指定する
＜本文＞
今回は前回のを改変
ヘッダーにログアウトボタンとかつけるために flex in flex にしてみたわけですよ
<body>
<header>
<h1>ヘッダー</h1>
<span>名前</span>
<button>ログアウト</button>
</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</body>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
display: flex;
}
header > h1 {
flex: 1;
}
main {
flex: 1 0 auto;
}
あれ？ヘッダーつぶれてね？
というわけで試行錯誤。
なんかまとめっぽいところ見てて適当に試してたらいけた。
参考： http://qiita.com/hashrock/items/189db03021b0f565ae27
なんかまとめっぽいところ見てて適当に試してたらいけた。
参考： http://qiita.com/hashrock/items/189db03021b0f565ae27
header {
flex-shrink: 0;
display: flex;
}
対策これで合ってるのかわかんないけど、ちょっと真面目に勉強しなおさないとダメかなーこれ…
コメント
コメントを投稿