css のレイアウトに指定に関する備忘録

inline と block について

• block は縦に積まれていって inline は横に積まれていく。
  • 要素にただ一つでも block があれば隣接した要素は block として取り扱われる
• inline 要素は line block を形成する。
• line block の高さは line-height で規定される。
  • font-size の N 倍の形式が基本。
• inline 要素は line break が起きるまでひとつの line に詰められていく。
• inline 要素の line break 判定は、原則その text の内容(リテラル)のみによって判定されていく。
  • foo<span>bar</span>foo は soft line break を導入しない。
  • inline-block の境目も line break を導入しない(一つの横に長い文字という取り扱いが一番分かりやすそう)
• line break は3種類ある(と考えておくと分かりやすい)
  1. 強制 line break
  2. soft line break
  3. overflow line break
• soft line break はテキストなどから User Agent が良い感じに決定していく。
  • word-break: break-all によって、あらゆる文字と文字の間で soft break を可能にする。
    • https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break
• overflow line break は、それを行わないと、どうしても overflow するときに line break を導入する。
  • overflow-wrap: break-word によって規定される。
  • overflow-wrap: anywhere もほぼ同じだがこちらは min-content width の計算の際に break 可能点として取り扱われる。
• 空白文字は white-space によって取り扱いが規定される。
  • 改行や空白を良い感じに小さくまとめる (collapse) と、 line break まわりの挙動を制御できる。

extrinsic sizing と intrinsic sizing

• block の大きさ指定は、その block が本来持っている尺度を使うか、外から指定するか、の方法がある。
  • 外から指定する方法は、絶対値(e.g. 12px)を与えるか、containing block との割合(percentage)で指定する方法がある。
    • percentage を指定しながら、親の大きさがすでに指定されていない場合、auto にフォールバックして(大体) intrinsic な値が使われる。
• その block が本来持っている尺度には max-content と min-content がある。
  • inline 方向の場合、ざっくりと、 line break を行わない場合の長さが max-content length, line break を積極的に行った場合の長さが min-content length
  • block 方向の max-content と min-content にはあまり分かりやすい説明はなさそう。
    • 多分問答無用で inline 方向に max-content した時の block 方向の長さが使われていそう。

flexbox

• flex box 的に block を配置していく。
  • inline element は勝手に block 化される。(anonymous block)
• flex container と、その要素 flex item から成る。
• flex item に余ったスペースを分配することができる。
  • flex item の配置は、各 item に flex-base を基本とする。
  • flex-base を指定しないと、大体、 max-content length
• flex-base に min/max 制約を加えた値でもって、 flex line に詰めていく。
• 詰め終わったら flex fill でスペースを分配する。
• そして各 item のレイアウトを計算した後に、それらを align とか justify とかで配置。
• max-content や min-content は、その方向が item の inline 方向と一致した場合に well-defined になるように定義されている模様。
  • 例えば、 max-content on main direction は全ての item を row 方向に並べて、かつ、各 item が max-content を達成できるような長さ
    • min-content は逆で、特に wrap がアリの場合には max(item の min-content)
  • 但し、 column wrap の場合はどの主要ブラウザも割と適当に決めて動作しているらしく、例えば https://github.com/philipwalton/flexbugs#flexbug-14 に依れば、 shrink-to-fit と flex-flow: column wrap は噛み合せが悪いっぽい。