toda que pantalla ocupe ocupar imagen espacio div contenido bootstrap body altura alto ajuste ajustar html css html5 css3 flexbox

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; }