本文は「堅牢なUIデザインの寸法ガイドby鄭燦明|クイックキャンパス」課の総括である.

図のプロパティの目的を理解する

印刷要素の幅が縮小し、従来の流れから離れている.

隣接する後行ブロック要素は、出図要素と重なり、行内要素は出図要素の周囲を流れる.

clear、flow-rootプロパティを使用して解除できます.

列を構成するプロパティではありません.😱

float > float

floatをfloatに無効にする古い方法(マッピング)

<p class="container">
	<span class="float>...</span>
</p>

.container { float: left; }

blank element

空の要素を追加する必要があります(マッピング)

<p class="container">
	<span class="float>...</span>
    ...
    <span class="clear"></span>
</p>

.clear { display: block; clear: both; }

overflow: hidden

<p class="container">
	<span class="float>...</span>
    ...
</p>

.container { oveflow: hidden; }

overflow: inline-block

inline-blockに変更すると、サブエレメントの高さが増加します.

<p class="container">
	<span class="float>...</span>
    ...
</p>

.container { display: inline-block; }

::after {clear: both} ⭐

現在最も一般的なコード

<p class="container">
	<span class="float>...</span>
    ...
    ::after
</p>

.container::after {
	content: '';
    display: block;
    clear: both;
}

display: flow-root ⭐

推薦したいコード(ieがサポートしていないだけ)

<p class="container">
	<span class="float>...</span>
    ...
</p>

.container { display: flow-root; } //⚠IE

FLOAT & DISPLAY

float要素は通常ブロックである.

displayプロパティがなくてもwidth/height、垂直エッジ/paddingプロパティを使用できます.

したがって、一般的にはdisplayプロパティを指定する必要はありません.

display:width、height、margin、marging-top、marging-bottom、floatとともにインラインが使用される場合、警告

display:inline block floatとの併用時に警告

display:blockを垂直位置合わせとともに使用すると警告

が発行されます.

display:table-*margin(およびその変形)またはfloatとともに使用する場合に警告

が発行されます.

COLUMN LAYOUT

columns: <'column-width'> || <'column-count'>

.container {
	max-width: 640px;
    columns: 310px 2; /* <'column-width'> || <'column-count'> */
    column-gap: 20px;
    column-rule: 20px solid #0002;
    background: #eee;
}

break-inside: avoid
1つのアトリビュートで、中央が切り捨てられないようにします(自然に配置されます).

Summary

図面は使用可能で、解除する必要があります.

列の配置はdisplay:flex|grid属性によって制御される.