ヘッダ・フッター以外の本文部分を縦に3つに割るのではなく、上下方向に三段にして、中にFlexboxで３つずつ子領域を作成。 子領域の中身によって幅が伸縮するので、縦方向では三列だけどズレた配置になる。 グリッドレイアウトに似ているけど、こちらは段ごとに区切られているのが違い ま、こんなアイデアもあるということで(^^;)
TITLE
1L
test
test
1M
test test test test
1R
test
test
2L
test test
test
2M
test
test
2R
test
test
3L
test
test
3M
test
test
3R
test test test
test
HTML
<div class="p_con">
<div class="header"><h1>TITLE</h1></div>
<div class="stage1">
<div class="stage1_L"><h6>1L</h6><p>test<br />test</p></div>
<div class="stage1_M"><h6>1M</h6><p>test test test test</p></div>
<div class="stage1_R"><h6>1R</h6><p>test<br />test</p></div>
</div>
<div class="stage2">
<div class="stage2_L"><h6>2L</h6><p>test test<br />test</p></div>
<div class="stage2_M"><h6>2M</h6><p>test<br />test</p></div>
<div class="stage2_R"><h6>2R</h6><p>test<br />test</p></div>
</div>
<div class="stage3">
<div class="stage3_L"><h6>3L</h6><p>test<br />test</p></div>
<div class="stage3_M"><h6>3M</h6><p>test<br />test</p></div>
<div class="stage3_R"><h6>3R</h6><p>test test test<br />test</p></div>
</div>
<div class="footer">FOOTER</div>
</div>
CSS
.p_con{width:320px;}
.p_con .stage1, .p_con .stage2, .p_con .stage3{display:flex;flex-wrap:nowrap;}
.stage1_L{flex:1 2 auto;}
.stage1_M{flex:4 1 auto;}
.stage1_R{flex:1 2 auto;}
.stage2_L{flex:1 2 auto;}
.stage2_M{flex:4 1 auto;}
.stage2_R{flex:1 2 auto;}
.stage3_L{flex:1 2 auto;}
.stage3_M{flex:4 1 auto;}
.stage3_R{flex:1 2 auto;}
.stage1_L, .stage1_M, .stage1_R, .stage2_L, .stage2_M, .stage2_R, .stage3_L, .stage3_M, .stage3_R{
border-radius:6px;margin:5px;padding:0;overflow:hidden;
}
.p_con h6{margin:0;padding:5px;}
.p_con p{margin:0;padding:5px;margin-left:10px;}
.p_con .header{background:blue;color:white;margin:0;}
.p_con .header h1{color:white;line-height:2;text-align:center;margin:0;}
.stage1, .stage2, .stage3{background:mistyrose;}
.stage1_L{background:lightblue;}
.stage1_M{background:khaki;}
.stage1_R{background:lightgreen;}
.stage2_L{background:lightblue;}
.stage2_M{background:khaki;}
.stage2_R{background:lightgreen;}
.stage3_L{background:lightblue;}
.stage3_M{background:khaki;}
.stage3_R{background:lightgreen;}
.stage1_L h6{background:cyan;}
.stage1_M h6{background:goldenrod;}
.stage1_R h6{background:green;}
.stage2_L h6{background:cyan;}
.stage2_M h6{background:goldenrod;}
.stage2_R h6{background:green;}
.stage3_L h6{background:cyan;}
.stage3_M h6{background:goldenrod;}
.stage3_R h6{background:green;}
.p_con .footer{background:darkgreen;color:white;margin:0;text-align:center;}
コメント