横並びの2つの要素の片方が折り返されないように固定する
どんなとき?
↓の画像みたいな感じにしたいとき。
HTMLとしては
<div class='header'>
<h1 class='title'>Title</h1>
<time class='publishedAt'>2020-12-25<time>
</div>
time
は h1
が短くても常に右端にいて、折返しされないようにしたいが、横幅固定とか position: absolute;
とかはしたくない 。 h1
は長ければ適当に折り返す。
どうやる?
他にもやり方ありそうだけどとりあえず次のようなCSSで実現できた。
.header {
display: flex;
.title {
word-break: break-all;
flex-grow: 1;
}
.publishedAt {
flex-shrink: 0;
}
}
flex-grow: 1;
で空きスペースは全て埋めるように .title
が伸びて、flex-shrink: 0;
で .publishedAt
が折り返されたりはみ出したりしないようになるイメージ