幅と柔軟なアイテムを作ることは、一緒にうまく機能します

短い答え： flex-shrinkとflex-basis特性は、おそらくあなたが探しているソリューションです。

詳細な回答

画像とテキストをこのように並べて配置したいとします。

ここで、FlexBoxを使用してこれを達成するとしましょう。親要素をdisplay: flex;良いスタートです。

 <code>.container { display: flex; }</code>

消す……

おっと！わかりました、これは許容できると思います。画像の幅を設定しないため、画像がテキストに近いことは理にかなっています。理想的には、画像に固定幅があることを望み、テキストは残りのスペースを占有します。

わかりました、やりましょう！

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; }</code>

これはクロムで見栄えがします。しかし、待って、何？ Firefox Devtoolsの画像タグを確認すると、設定した幅の値ではないことがわかります。

min-widthを使用して、画像を強制的に必要な幅50pxに達するようにします。

 <code>img { min-width: 50px; margin-right: 20px; }</code>

ただし、これは幅を設定するのに役立つため、マージンも追加する必要があります。

 <code>img { min-width: 50px; margin-right: 20px; }</code>

それでおしまい。 Firefoxでより良い、そしてまだChromeで働いています。

より詳細な回答

flex-shrinkプロパティを使用して、幅があるかどうかに関係なく、サイズを縮小しないようにフレックスアイテムを指示する必要があるため、画像が圧縮されていることに気付きました。

すべてのフレックスプロジェクトのflex-shrink値は1です。画像要素を0に設定する必要があります。

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; flex-shrink: 0; }</code>

どんどん良く！しかし、私たちはまだより多くの改善を行うことができます。

最終回答

flex-shrink flex略語プロパティに含まれているため、さらに整理できます。

 <code>flex: none | [ ? || ]</code>

flex-shrink値を0に設定し、 flex-basis値を画像にしたいデフォルトの幅に設定すると、 width属性を完全に取り除くことができます。

 <code>.container { display: flex; } img { flex: 0 0 50px; margin-right: 20px; }</code>

そうそう：

別の例

flex-shrinkプロパティは、他の多くの問題を解決します。FlexBoxの使用を開始したい場合は非常に重要です。その理由の別の例は次のとおりです。上記に似た別の質問に出くわしました。これについては、最近のニュースレターで述べました。ユーザーが複数のプロジェクトを左右にスクロールできるようにするナビゲーションコンポーネントを構築しています。私の仕事をチェックしている間、私は次の問題に気づきました：

より長いナビゲーションアイテムがそのように包まれるべきではありません - しかし、以前の質問のおかげで、私は最終的にこれが起こる理由を得ました。 flex-shrinkプロパティを0に設定すると、このナビゲーション内の各アイテムが縮小するのではなく、次のようにコンテンツの幅を取るように指示されます。

はい、 flex属性を使用するために再び追加のステップを踏むことができます。今回は、ナビゲーションコンテナにスペースを割り当てるときにすべてのアイテムに対してできるだけ多くのスペースを考慮したいためflex-basisとしてautoを使用して使用できます。

ロングライブ！私たちはそれを解決しました。答えは単なるコードですが、真に柔軟な要素を作成することが重要です。

以上が幅と柔軟なアイテムを作ることは、一緒にうまく機能しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。