html5 - grow - Flexión del ancho del contenedor cuando flex-flow está configurado para envolver la columna
justify-content (1)
Chrome coloca automáticamente el espacio entre el div y la parte superior del borde, para solucionarlo, puede usar:
margen inferior: 100%;
¿Por qué esto? margin-bottom: reinicia al 100% el elemento y mueve el elemento hacia arriba. Lo has intentado con:
body {
margin: 0;
padding: 0;
}
Pero esto no funcionó porque el cuerpo sposte el html de la página y no el elemento individual.
El código completo estará aquí:
.flex-container {
position: fixed;
height: 90%;
padding: 0;
margin: 0;
list-style: none;
border: 6px solid green;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
justify-content: flex-start
align-content: flex-start;
align-items: flex-start
}
/** Just to show the elements */
body {
margin: 0;
padding: 0;
}
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
height: 100px;
margin-bottom: 100%;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
Tengo un contenedor con altura y display: flex fijas display: flex . Quiero que los niños se -webkit-flex-flow: column wrap; en forma de columna configurando -webkit-flex-flow: column wrap; ajuste de -webkit-flex-flow: column wrap; .
¿Alguien puede explicarme cómo Chrome calcula el ancho resultante del contenedor div (div con borde verde) y por qué deja tanto espacio libre a la derecha de cada elemento rojo? Lo que quiero es que el contenedor tenga el ancho adecuado para todos los niños, sin espacio adicional.
Si no es posible con CSS puro ¿me puede dar una alternativa para lograr esto?
Estoy usando Chrome v 29.0.1547.76
El código para reproducirlo es:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
position: fixed;
height: 90%;
padding: 0;
margin: 0;
list-style: none;
border: 6px solid green;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
justify-content: flex-start
align-content: flex-start;
align-items: flex-start
}
/** Just to show the elements */
body {
margin: 0;
padding: 0;
}
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
height: 100px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
</body>