html - ocupe - div que se ajuste a la pantalla bootstrap
Cómo adaptar el ancho de un div flexible al contenido (1)
Puede usar display: inline-flex
#container {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 200px;
padding: 10px;
margin: 20px;
background-color: blue;
}
#container .item {
width: 80px;
height: 50px;
background-color: red;
margin: 10px;
}
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="container">
<div class="item"></div>
</div>
Mi idea es dar un ancho de div adaptativo. Cuando tengo un solo artículo, el ancho debe ser el mismo que el del div contenedor.
¿Alguna sugerencia de cómo hacer esto?
Ejemplo: http://codepen.io/tomasfrancisco/pen/PNvLLw
HTML:
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="container">
<div class="item"></div>
</div>
CSS:
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 200px;
padding: 10px;
margin: 20px;
background-color: blue;
}
#container .item {
width: 80px;
height: 50px;
background-color: red;
margin: 10px;
}