🐙
ブロックレベルにしたaリンクのテキストをcontent-box分の領域のみの当たり判定にして縦並びに設置したい
まずそもそもとしてcontent-boxとは要素の中の領域の部分を指す
本題
よくある、または考えられるケースとしたらCSSのdisplayプロパティにてinline-blockを当て手っ取り早く
タグで改行してしまうのが手っ取り早いだろう。
見た目に関しては問題なく実装出来るが如何せんwhite-spaceとして1つ文字を挿入するのは気持ち悪い。
<a class="link1">リンク1</a>
<br>
<a class="link2">リンク2</a>
もしくは子要素をインラインブロック要素にして親要素に対してdisplayプロパティにてinline-flexを当てdisplay-directionプロパティでcolumnを当て無理やり縦並びにするパターン
<div class="wrapper">
<a href="#" class="link">リンク1</a>
<a href="#" class="link">リンク2</a>
</div>
.wrapper{
display:inline-flex;
flex-direction: column;
}
.link{
display:inline-block;
}
うーん...ややこしくね...？っていうのがまず最初に抱く感想。
解決策
何かもっとわかりやすい且つ手っ取り早い方法無いかなーと調べた結果CSSのキーワード値としてmax-contentの存在を知る
.link{
width:max-content;
}
この1CSSの記述で、例えaリンクをブロック要素にしたとしても画面いっぱいの幅にならず且つ少ない記述でcontent-box分のみの領域を確保した状態で縦並びを表現する事が出来る。
Discussion