部分ユニットの概要

分割、つまり分数単位は、私たちの生活に大きな影響を与えます。なぜでしょうか? 最大の汎用性と適応性を備えているからです。分割は、グリッドの分割を処理すると同時に、間のスペースも考慮します。グリッドを使用する場所には FR 単位を組み込むことができます。また、クイック スタック要素はグリッドを使用するため、クイック スタックをカスタマイズするときに FR 単位を使用できます。

分数（1FR）とは何ですか？

分数または 1FR は、全体の 1 つの部分を表します。1 つの 1FR 分数は、使用可能なスペースの 100% に相当します。2 つの 1FR 分数では、それぞれが使用可能なスペースの 50% を構成します。したがって、このシナリオでは、1FR は使用可能なスペースの半分に相当します。1FR 分数が 250 個あると仮定すると、各分数 (1FR) は 1/250 または 0.4% に相当します。

• 分数で表すと、1FR = 1/FRの総数
• パーセンテージ: 1FR = 100/FRの総数

では、2 分数 (2FR) とは何でしょうか?

2 つの分数または 2FR は、全体の 2 つの部分を表します。したがって、1FR + 1FR + 2FR の場合、1FR 分数はそれぞれ 25% になり、2FR 分数は 50% になります。

パーセンテージではなく分数

パーセンテージの活用

それぞれサイズが同じで、使用可能な領域全体を占める 4 つの列を持つグリッドを作成するとします。100 を 4 で割ることで、各列に 25% の幅を割り当てることができます。

しかし、1 つの列を他の列の 2 倍のサイズに拡大したい場合はどうでしょうか。その場合、2X + X + X + X となり、X は 25% のままで、合計は 125% になります。1 つの列の幅を 50% に変更すると、列は使用可能なスペースを 25% 超過します。列の幅はパーセンテージで設定されているため、幅の値を再調整し、各列のサイズをもう一度再調整する必要があります。

別の列を導入したいとします。5 列の合計は 100 になるはずです。したがって、各列は 100/5 = 20% である必要があります。使用可能なスペースがオーバーフローしないように、各列の値を更新する必要があります。

列を追加または削除したり、行または列のサイズを変更したり、ギャップを組み込んだり、パーセンテージを使用するときにギャップのサイズを変更したりする必要がある場合は、各列のサイズを再計算し、各列に新しいサイズの値を再実装する必要があります。

分数の活用 (FR)

もう一度、グリッドに 4 つの列を含め、各列のサイズを等しくして、使用可能なスペース全体を占めるようにしたいとします。これを実現するには、4 つの列を設定します。これで完了です。デフォルトでは、各列の幅は 1FR で、使用可能なスペースを利用するために列が伸びます。

1 つの列を他の列の 2 倍のサイズにしたい場合は、単に 2FR として指定します。これは全体の 2 つの部分に相当します。残りの列は 1FR のままで、それぞれ全体の 1 つの部分を占めます。

行や列の追加または削除

行や列を追加したり削除したりしたい場合、サイズを調整する必要はありません。FR を使用すると、行と列は自然に調整されます。

ギャップの組み込みまたは変更

FR 単位を利用すると、グリッドにギャップを含めることができ、行と列は自動的に調整されます。

FRとその内容

1FR は、行または列のセル内に含まれるコンテンツが適応可能な場合 (つまり、列または行に合わせて拡大縮小できる場合) に、全体の一部を表します。ただし、コンテンツの拡大縮小が停止すると、FR 値を持つ行または列はコンテンツに合わせて適応します。他の列と行は比例して縮小されます。

• すべきか カラム 固定幅のグリッド子要素が含まれている場合、列の幅は常にグリッド子要素の幅と同じかそれを超えます。さらに、列の幅はテキスト要素内の最長の単語よりも小さくなることはありません。この問題は、グリッド子要素に overflow: hidden を適用することで解消できます。
• もし 行 固定の高さを持つグリッドの子要素がある場合、行の高さは常にグリッドの子要素の高さと同じかそれを超えます。この問題は、グリッドの子要素に overflow: hidden を使用することで解決できます。

最小/最大

FR は、囲まれたコンテンツに適合する最小値を自動的に設定します。したがって、FR では、最小値は自動 (つまり、自動) で、最大値は設定した値に対応します (例: 1FR、2FR など)。

この最小値を超えるには、 デフォルト に 最小/最大 のために サイズ最大値は 1FR ですが、最小値は任意の値にすることができます。ただし、指定した最小値を超える固定幅のコンテンツはセルからオーバーフローすることに注意してください。