フレックス ボックス モデルを使用して入力メカニズムを作成しようとしています。すべてのブラウザーでサポートされているわけではありませんが、この場合は問題ありません。実際には、Web キット ブラウザーでのみ動作する必要があります。
特定の幅を使用する必要なく、素敵な 2 列のレイアウトを構築しようとしています。ラベルと入力の両方で flex プロパティを 1 に設定しています。ただし、ご覧のとおり、ラベル要素が長くなると、その隣にある入力の幅が台無しになります。
ラベルと入力の両方を列の下で同じ幅にしたいのですが、ウィンドウ/デバイスのサイズが変化するにつれてそれらを拡大および縮小したいと考えています。
widthいずれかの要素にa を設定せずにこれを行う方法はありますか?
アップデート
ラベル要素の a を 5% に設定するmax-widthと、基本的に目的の効果が得られます。ただし、幅を設定せずに純粋にフレックスボックスを使用せずにこれを行う方法があるかどうかはまだ疑問に思っていますか?
あなたが提供した例には列がまったくなく、列があるように見えるだけです。実際の列がなければ、これらの 3 つの無関係なブロックが何らかの方法で結合されているように見えるように幅を設定する必要があります。
「box」ではなく「flex」になった新しい CSS3 Flexible Box 構文を使用する必要があります。仕様を参照してください: http://www.w3.org/TR/css3-flexbox/これにより、要素を<grow> <shrink> <default width>1 1 50% に設定できるため、要素は同じ速度で拡大および縮小し、それぞれ利用可能な幅の 50% まで (これを調整するか、60/40 などにすることができます)。
JSFiddle の例: http://jsfiddle.net/XTa98/4/
それ以外の場合、幅を設定する必要がないように実際の列が必要な場合は、すべてのラベルを独自の「列」div にラップし、すべての入力を独自の「列」div にラップする必要があります。
JSFiddle: http://jsfiddle.net/XTa98/5/
これには実際の列があり、幅が設定されていませんが、要素が独自の行にないため、適切に低下しません。これを軽減するために、常にtext-overflow: ellipsesテキストを切り捨てることができます。
いずれにせよ、トレードオフがあります。実際に列を使用せずに列の外観が必要な場合は、何らかの種類の幅を設定する必要があります。それ以外の場合は、実際の列を使用できますが、要素が行として結合されなくなり、ブラウザーの幅を縮小するときにオーバーフローを考慮する必要があります。
幅の設定を避けるために、列 div で要素をラップする必要はありません。各ラベルと入力を flex:1 に設定するだけで、幅が均等に分割されます。ただし、これは、この場合、それぞれを 50% 幅に設定するのと実質的に同じであるため、実際にどのような利点があるかはわかりません。