1

SUITCSS の fill ユーティリティの設計を見直しています。

.u-sizeFill {
  flex: 1 1 0% !important; /* 1 */
  flex-basis: 0% !important; /* 2 */
}

これは、残りのスペースを埋めたい場所でフレックスするために適用されます。

私がこれを正しく解釈しているかどうかを確認したいだけです。基準が 0% なので、アイテムの幅はデフォルトで 0 にすることができますか? フレックス グローとフレックス シュリンクはどちらも 1 なので、同じ速度で伸び縮みします。この解釈は正しいでしょうか?

.u-sizeFill {
  flex: 1 1 0% !important; /* 1 */
  flex-basis: 0% !important; /* 2 */
}
<div style="display: flex; background-color: yellow; width: 5rem; height: 3rem">
      <div style="min-width: 0" class="u-sizeFill">
        Lorem ipsum dolor sit amet, probo option similique vix te, ei summo
        aliquip nec. Atqui diceret ceteros.
      </div>
</div>

4

1 に答える 1