Tailwind CSS で 2 番目の flex 項目を最初の項目の周囲にラップする方法に関するガイド
P粉156983446
P粉156983446 2023-08-02 18:31:22
0
1
479
<p>2 つの flex アイテムを含む flex コンテナがあります。最初のフレックス項目はコンテナの幅を決定し、2 番目のフレックス項目はコンテナの周囲を囲む必要があります。 Tailwind CSS をスタイル設定に使用していますが、希望するレイアウトが得られません。 <br /><br />これが私の現在のコードです: </p><p><br /></p> <pre class="brush:html;toolbar:false;"><div class="flex flex-col"> <div class="flex-initial w-2/3 bg-blue-500 p-4"> <!-- 最初の子 --> <!-- 最初の子の内容 --> </div> <div class="bg-red-500 p-4"> <!-- 残りのすべてのコンポーネントがそれを囲みます --> <!-- 残りのコンポーネントの内容 --> </div> </div> </pre> <p>w-2/3 を使用して最初の子の幅を設定しようとしましたが、2 番目の子は依然としてコンテナ内の使用可能なスペースをすべて占有します。 2 番目の flex アイテムを最初のアイテムの周囲にラップさせ、最初のアイテムにコンテナの幅を決定させるにはどうすればよいでしょうか? <br /><br />ご支援やご指導を賜りまして、誠にありがとうございます。前もって感謝します! </p>


P粉156983446
P粉156983446

全員に返信(1)
P粉402806175

問題を完全に理解しているかどうかはわかりませんが、解決策は次のとおりです。

  • まず、最初の子 div には、w のような固定幅を使用します。 -56。
  • 次に、w-fit クラスを親 div に追加します。
リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート