web-dev-qa-db-ja.com

flex-containerをflex-itemsの幅に設定するにはどうすればよいですか？

justify-content: flex-startのflexコンテナがあります。コンテナのサイズより少ないスペースをフレックスアイテムが使用するため、右側がオーバーフローします。

フレックスコンテナで明示的な幅を設定する以外に、オーバーフローを削除するためにwidth: autoと同等の方法を使用する方法はありますか？

csscss3flexbox
48
BOverflow

コンテナをコンテナの幅に拡張するのではなく、コンテナをアイテムの幅にしたい場合...

display:flexをdisplay:inline-flexに変更することで取得できる場合があります

50
Mahks

Mahksが提案するように、 フレックスコンテナをインラインにする を使用できます。ただし、インラインに配置することがレイアウトに適さない場合は、フレックスコンテナ（フレックスアイテムではなく）をフロートさせることもできます。

Floats は、内容に合わせてシュリンクラップします。これは、ブロックレベルのフレックスコンテナでも同じです。インラインレベルのフレックスコンテナは、親インラインフォーマットコンテキストでレイアウトされている場合、 inline-block box と同様に動作します。つまり、デフォルトでコンテンツに合わせて縮小されます。

0
BoltClock

  1. width: min-content（CSS3は「外因性」ではなく「内因性」）

  2. display: inline-flexインラインかどうかを気にしない場合

段落でwidth: min-contentを使用すると、最長のWordが幅を決定します。

.flex-container {
  display: flex;
}

.flex-inline-container {
  display: inline-flex;
}

.width-min-content {
  width: min-content;
}

.row-direction {
  flex-direction: row;
  border: 0.0625rem solid #3cf;
 }
.col-direction {
  flex-direction: column;
  border: 0.0625rem solid Magenta;
}
flex
<div class='flex-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
flex width: min-content
<div class='flex-container width-min-content row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container width-min-content col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
inline-flex
<div class='flex-inline-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>

<div class='flex-inline-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>
0
neaumusic

あなたの質問についてはわかりませんが、：

[〜＃〜] demo [〜＃〜]： http://jsfiddle.net/jn45P/

flex-grow:1;を使用してスペースを埋め、フレックスアイテムの柔軟性を有効にする必要があります

<div class="o">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

<div class="o flex">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

div.o
{
    border:2px red solid;
    padding:2px;
    width:500px;
    flex-direction:row;
    display:flex;
    justify-content:flex-start;
}

div.o > div
    {border:2px red solid;margin:2px;}

div.o.flex > div
    {flex:1 1 auto;} /* enable flexibility on the flex-items */
0
user652649