4つの要素を幅の異なるdivの隣に配置します。

Question

コンテナdivの内側に4つの要素を隣り合わせて配置しようとしています。それらはすべて異なる幅である。

これは私の望ましい結果である：

残念ながら、これは現時点では次のようになります。

.container { 
 
    width: 100%; 
 
    background: blue; 
 
    padding: 10px; 
 
} 
 
p { 
 
    margin: 0px; 
 
    color: #fff; 
 
    font-size: 30px; 
 
    width: 11%; 
 
    float: left; 
 
} 
 
button { 
 
    float: right; 
 
}

<div class="container"> 
 
    <p>Title</p> 
 
    <form> 
 
    <input type="text" class="input"> 
 
    </form> 
 
    <button>Apple</button> 
 
    <button>Orange</button> 
 
    <div style="clear: both;"></div> 
 
</div>

JsFiddle：https://jsfiddle.net/uLL708jg/

Flexはこれに対応しますか？もしそうなら、誰かが答えに私を見せてくれますか？

Answer 1

はい、flexboxがこれを解決できます。これは単なる基本的な設定です。 .containerにはdisplay: flex;を入れ、すべてのフロートを取り外します。次に、divの部分（ここでは.right）にボタンをラップし、margin-left: auto;と入力して、画面の右側にそれを止めます。

編集

justify-content: space-between;項目の間にスペースがありますように、3つの項目が整列するので、検索はdivの.containerの真ん中になります。 margin-left: auto;の必要はもうありませんが、その周りのdivラッパーが必要です。フレックスボックスの詳細と使用方法at MDN

.container { 
 
    display: flex; 
 
    width: 100%; 
 
    background: blue; 
 
    padding: 10px; 
 
    flex-flow: row wrap; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
p { 
 
    margin: 0px; 
 
    color: #fff; 
 
    font-size: 30px; 
 
    width: 11%; 
 
}

<div class="container"> 
 
    <p>Title</p> 
 
    <form> 
 
    <input type="text" class="input"> 
 
    </form> 
 
    <div class="right"> 
 
    <button>Apple</button> 
 
    <button>Orange</button> 
 
    </div> 
 
</div>