CSS
CSS3
grid
flexbox
gridlayout

flexやgridって改めて便利だなと思ったこと

More than 1 year has passed since last update.

以下の図のようなよくあるレイアウトの場合、

これまではposition: absolute;を使わないと実現出来ませんでした。(あるいはjsか)

rayout.png


flexで組む場合


html

<div class="wrap">

<div class="inner">
<div class="foo">
<img src="test.png">
<p>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
</div>
<div class="bar">
<p>fugafuga</p>
</div>
</div>
<div class="inner">
<div class="foo">
<img src="test.png">
<p>hogehoge</p>
</div>
<div class="bar">
<p>fugafuga</p>
</div>
</div>
</div>


flex.css

.wrap {

display: flex;
word-break: break-word;
}
.inner {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 50%;
padding: 10px;
margin: 0 10px;
border: 1px solid #eee;
}
.foo img {
width: 100%;
}
.bar {
align-self: flex-end;
background: #eee;
}


gridの場合

※ htmlは同じなので割愛


grid.css

.wrap {

display: grid;
grid-template-columns: repeat(auto-fit, 50%);
word-break: break-word;
}
.inner {
display: grid;
padding: 10px;
margin: 0 10px;
border: 1px solid #eee;
}
.foo img {
width: 100%;
}
.bar {
align-self: flex-end;
justify-self: flex-end;
background: #eee;
}

gridはまだそこまでガツガツ使っていないので、この方が簡潔に書ける等ありましたらコメントいただきたいです!

ちょっとしたことですが、こういうレイアウトを組む場合に少しでも考える時間が減ると良いかなと思います。