html - propiedad - flexbox css mdn
pantalla: flexión; frente a calc(); actuación (1)
Hoy aparecí en una discusión en la que me pregunto cuál es la mejor forma de tener dos div uno al lado del otro.
Por un lado, me encanta usar display:flex; , en el otro lado está la opción de usar calc() , la razón es que nuestro div tiene relleno y tenemos que reducir el ancho por el relleno. Caso:
<div class=''container''>
<div class=''inner''></div>
<div class=''inner''></div>
</div>
Ambos deben estar en 50% de ancho. El css predeterminado es:
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.container {
height: 100%;
width: 100%;
}
.inner {
width: 50%;
padding: 20px;
}
La display:flex; forma sería adicional:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
align-content: stretch;
}
La forma de calc() sería:
.inner {
width: calc(100% - 40px);
display: inline-block;
}
o:
.inner {
width: calc(100% - 40px);
float: left;
}
No quiero ningún diseño de tabla en mi CSS. Además, no es necesario que cuidemos las versiones del navegador, esto solo debería ser funcional en las últimas versiones, siempre.
¿Qué se recomienda usar? ¿Qué tiene más rendimiento?
Ya encontré un artículo que dice que la actuación ya se ha incrementado mucho. Enlazar
Realicé una prueba simple por curiosidad y no parece haber diferencias en el rendimiento entre float + calc vs flex , aparte de que IE es mucho más lento que FF y Chrome.
De un artículo relacionado :
El nuevo código flexbox tiene muchos menos codepaths de diseño de paso múltiple. Sin embargo, todavía puede acceder a rutas de códigos de múltiples pasos con bastante facilidad (por ejemplo, flex-align: stretch es a menudo de 2 pasadas). En general, debería ser mucho más rápido en el caso común, pero puede construir un caso en el que sea igualmente lento.
Dicho esto, si puede salirse con la suya, el diseño de bloque regular (no flotante), por lo general será tan rápido o más rápido que el nuevo flexbox, ya que siempre es de un solo pase. Pero el nuevo flexbox debería ser más rápido que usar tablas o escribir código personalizado de diseño basado en JS.
Estoy bastante seguro de que calc() hace que el diseño de un bloque requiera múltiples pases también :)
LE: Hubo un error en Firefox que hizo que los reflows fueran muy lentos cuando tenías 4-5 flexboxes anidadas, pero se corrigió en las últimas versiones (37+).