Skip to main content
Hago el código reproducible.
Origen Enlace
user166844
user166844

Ten en cuenta que para utilizar flexbox, display: flex; debes aplicarselo al contenedor de los elementos que quieres organizar.

Una solución (y no es la única) puede ser crear un solo contenedor con la clase "categoria-caja" y dentro de este las tres listas. Por ejemplo:

<div class="categoria-caja">
    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
    </ul>
    
    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
    </ul>

    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
    </ul>
</div>

<div class="categoria-caja">
            <ul>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
            </ul>
            
            <ul>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
            </ul>

            <ul>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
            </ul>
</div>

Ten en cuenta que para utilizar flexbox, display: flex; debes aplicarselo al contenedor de los elementos que quieres organizar.

Una solución (y no es la única) puede ser crear un solo contenedor con la clase "categoria-caja" y dentro de este las tres listas. Por ejemplo:

<div class="categoria-caja">
    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
    </ul>
    
    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
    </ul>

    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
    </ul>
</div>

Ten en cuenta que para utilizar flexbox, display: flex; debes aplicarselo al contenedor de los elementos que quieres organizar.

Una solución (y no es la única) puede ser crear un solo contenedor con la clase "categoria-caja" y dentro de este las tres listas. Por ejemplo:

<div class="categoria-caja">
            <ul>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
            </ul>
            
            <ul>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
            </ul>

            <ul>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
                <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
            </ul>
</div>

Origen Enlace
Pablo Gutiérrez
  • 2.4k
  • 2
  • 8
  • 14

Ten en cuenta que para utilizar flexbox, display: flex; debes aplicarselo al contenedor de los elementos que quieres organizar.

Una solución (y no es la única) puede ser crear un solo contenedor con la clase "categoria-caja" y dentro de este las tres listas. Por ejemplo:

<div class="categoria-caja">
    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
    </ul>
    
    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
    </ul>

    <ul>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 1</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 2</a></li>
        <li><span class="icon-box"></span><a href="#" target="_blank">item 3</a></li>
    </ul>
</div>