En la dirección de la columna flexible, el contenido no puede soportar el gran agujero del elemento principal después de que el ajuste cambia automáticamente las columnas

I. Introducción

Requisitos : la altura del contenedor total es fija, se muestran 6 productos en una columna y el número de columnas no es fijo.

El efecto es el siguiente (el número de columnas no es fijo, 3 o 4): 

2. Pensando 

Entonces pensé que sería tan fácil ~, use el diseño flexible, configure la dirección flexible en la columna (columna), luego fije la altura de la caja y la altura de cada elemento, y luego configure la altura para que no sea suficiente para cambiar automáticamente la columna, se resolverá. . . Pero después de una comida, descubrí que el contenido aquí es correcto, pero el contenido del interior no abre el recipiente exterior, como se muestra en la siguiente figura.

Así que lo comprobé, muchas personas se han encontrado con este problema, parece ser un pequeño problema con flex. Esta forma no funciona, así que seguí a los grandes y cambié a otro método, usando la propiedad del modo de escritura en css para lograr esto. Esta propiedad define la disposición horizontal o vertical del texto y la dirección del texto en el elemento de nivel de bloque.

3. Solución:

Código principal HTML:

<div class="home-category-detail" @mouseleave="leave()" v-show="isShowCategoryDetail" @mouseenter="showCategoryDetailFn">
    <a :href="item.href" v-for="(item,index) in homeCategoryDetail" :key="'phoneNavList' + index" >
          <img :src="item.src" :alt="item.name">
          <span style="display:inline-block;">{
   
   {item.name}}</span>
    </a>
</div>

css:

Establezca el modo de escritura: vertical-lr en el elemento principal más externo ( home-category-detail ) , es decir, el contenido se organiza verticalmente y alineado a la izquierda. A continuación, encontrará que la img y lapso en el una etiqueta están también dispuestos de arriba a abajo En este momento, lo que necesita.  Añadir a escribir en modo: horizontal-tb a la de una  etiqueta . La siguiente es mi parte css, solo como referencia.

.home-category-detail {
    height: 460px;
    width: auto;
    background: #fff;
    position: absolute;
    top: 0;
    left: 234px;
    writing-mode: vertical-lr;
    box-shadow: #b0b0b0 3px 5px 10px;
    a {
        height: 70px;
        width: 228px;
        text-align: left;
        padding-left: 20px;
        color: #333;
        writing-mode: horizontal-tb;
        line-height: 70px;
        img {
            height: 50px;
            width: 50px;
            vertical-align: middle;
        }
    }
}