Los programadores que están familiarizados con los diseños móviles saben que tanto en los diseños de cuadrícula como en los de caja flexible, existe un atributo de contenido justificado y el espacio uniforme es uno de sus valores. El objetivo es lograr los siguientes efectos:
¿Cuál es el efecto? ? ?
Los subelementos comparten por igual el espacio del contenedor, que es un efecto que ni el espacio intermedio ni el espacio alrededor pueden lograr directamente.
¡Es realmente poderoso! ! ! Sin embargo, revisamos el sitio web puedo usar y descubrimos que la compatibilidad de espacio uniforme no es buena. Por ejemplo, ios safari no lo admite en absoluto antes de 10.3. Desde 10.3, el diseño de cuadrícula lo admite, pero el diseño de flexbox no lo admite. él.
Por lo tanto, debemos tener mucho cuidado al usar el espacio de manera uniforme y debemos asegurarnos de que el navegador lo admita, de lo contrario, no podemos lograr el efecto que desea.
¿Se pueden usar otros métodos para lograr el efecto de espacio uniforme?
La respuesta es sí, podemos usar el espacio intermedio para simular la implementación, y en la consulta en puedo usar, encontramos que la compatibilidad del espacio intermedio es mucho mejor, como se muestra en la siguiente figura:
Podemos compararlo con el espacio uniforme anterior para ver si el soporte del navegador es mucho mejor.
Pero los programadores experimentados saben que el espacio intermedio no deja espacios en blanco al principio y al final de los elementos secundarios, como se muestra en la siguiente figura:
Entonces, ¿cómo podemos dejar el mismo tamaño en blanco al principio y al final? Algunas personas pensarán en el espacio alrededor, pero el espacio que deja el espacio alrededor al frente y al final es la mitad del tamaño del espacio en el medio, por lo que no funcionará.
Pero sabemos que el espacio intermedio deja el mismo tamaño de espacio en el medio de cada subelemento, el primer y el último elemento están cerca de ambos lados, este es el principio de funcionamiento del espacio intermedio, de acuerdo con este principio, podemos coloque en la parte superior del contenedor Y finalmente use el pseudo-elemento para agregar un elemento con un ancho de 0, por lo que es equivalente a agregar un espacio en blanco del mismo tamaño en ambos lados del primer y quinto elementos.
Echemos un vistazo al código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用space-between模拟space-evenly的效果</title>
<style>
.box{
width: 400px;
height: 200px;
border:1px lightpink solid;
display: flex;
}
.item{
width: 40px;
box-sizing: border-box;
background: lightpink;
border:1px solid purple;
}
/*下面的css在容器的最前和最后添加块元素，在flex布局中，子元素宽的大小默认为0*/
.box::after,.box::before{
content:"";
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>¡De esta manera, podemos lograr el efecto que deseamos! ! ! !