親を埋める子の幅を設定する

Question

divの子をその幅にしたいと思っています。

は今、このようなコードを使用しています：

.parent { 
 
    width: 100%; 
 
    display: inline-block; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    margin-left: 1%; 
 
    width: 31.4%; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

、それは3 boxesのために働いたが、私がしたいことということですだ - ボックスカウントがoneまたはtwoであっても、私はそれらをしたいです親の幅を埋める。私はこれを達成するためにCSSを使用したいと思います。

Answer 1

あなたはflexboxプロパティを使用してこれを達成することができます。ここで

はデモです：

.parent { 
 
    display: flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    height: 100px; 
 
    background: #ddd; 
 
    flex: 1; 
 
    margin: 0 10px; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 2

使用フレキシボックス：

.parent { 
 
    width: 100%; 
 
    display: flex; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    margin-bottom: 15px; 
 
} 
 

 
.child { 
 
    flex: 1; 
 
    margin: 0 10px; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 3

あなたは親flexboxを作成し、利用可能なスペースがある場合に成長する子供たちのために定義することができます。 .childの幅を削除しました。

.parent { 
 
    width: 100%; 
 
    display: inline-flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    margin-left: 1%; 
 
    height: 100px; 
 
    background: #ddd; 
 
    flex-grow: 1; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 4

あなたはすべての要素に対して固定されている幅のように30％、あなたはそのサイズが固定され、常駐している要素の終わりに、総後に追加される他の要素 を作成するので、すべての時間を使用しています幅がオーバーフローしている親コンテナの幅を超えています。

代わりにフレックスボックスを使用してください。

.parent { 
 
    width: 100%; 
 
    display:flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    flex:1; 
 
    margin-left: 1%; 
 
    width: 31.4%; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 

 
</div>

Answer 5

あなたはこれを達成するためにフレキシボックスを使用することができます。

以下のデモは、より多くの子ノードで動作する方法と、高さがゼロのノードで動作する方法を示しています。

また、フレックスボックスで子アイテムが正しく動作するようにmarginプロパティを変更しました。ここ

.parent { 
 
    width: 100%; 
 
    display: inline-flex; /*used inline-flex here, to mirrior your inline-block setting, but you can use flex*/ 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-flex; 
 
    flex-grow: 1; 
 
    margin: 0 1%; 
 
    height: 100px; 
 
    background: #ddd; 
 
} 
 

 
/*demontration for zero-height child elements*/ 
 
.child:nth-child(2) { 
 
    height: 0; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <!-- remove these to test with different child count ---> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 6

以下のコードで、私はあなたのために

\t .parent { 
 
    
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 

 
    -webkit-flex: 1; /* Safari 6.1+ */ 
 
    -ms-flex: 1; /* IE 10 */  
 
    flex: 1; 
 
    margin-left: 1%; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div><br> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div><br> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 7

のことができます。そして、その子の固定数の場合、これは役立つかもしれないと思います子の幅を常に（親幅/いいえ）で計算します。子供の幅を子供に固定する。しかし、コードに動的な子がある場合は、displayのflexプロパティを使用できます。 にとflex:1にdisplay:flexを追加するだけです。

ただし、これにはブラウザの互換性に関する問題はほとんどなく、古いブラウザをターゲットにしている場合はお勧めできません。 flexプロパティをサポートしていない要素のケースはほとんどありません。詳細はlinkを参照してください。私は子供の幅を計算し、プロパティを追加するためのJavaScriptコードを書くことをお勧めします。 これがあなたを助けてくれることを願っています！フレックスボックスhereについて詳しく学ぶことができます。