[html] Flexbox no le da el mismo ancho a los elementos


Answers

Para crear elementos con el mismo ancho usando Flex, debe establecer su hijo (elementos flexibles):

flex-grow: 0;

base flex: 25%;

Le dará a todos los elementos en la fila 25% de ancho. No crecerán e irán uno por uno.

Question

Intentando un navegador flexbox que tenga hasta 5 elementos y un mínimo de 3, pero no divide el ancho por igual entre todos los elementos.

Fiddle

El tutorial sobre el que estoy modelando es http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

HABLAR CON DESCARO A

  * {
        font-size:16px;
    }
    .tabs {
        max-width: 1010px;
        width:100%;
        height: 5rem;
        border-bottom:solid 1px grey;
        margin:0 0 0 6.5rem;
        display: table;
        table-layout:fixed;
    
        ul {
            margin:0;
            display: flex;
            flex-direction: row;
        
            li {
                flex-grow:1;
                list-style:none;
                text-align:center;
                font-size:1.313rem;
                background: blue;
                color: white;
                height: inherit;
                left:auto;
                vertical-align:top;
                text-align:left;
                padding:20px 20px 20px 70px;
                border-top-left-radius: 20px;
                border:solid 1px blue;
                cursor:pointer;
            
                &.active {
                    background: white;
                    color: blue;
                }

                &:before {
                    content:"";
                }
            }
        }
    }
<div class="tabs">
     <ul>
       <li class="active" data-tab="1">Pizza</li>
       <li data-tab="2">Chicken Noodle Soup</li>
       <li data-tab="3">Peanut Butter</li>
       <li data-tab="4">Fish</li>
     </ul>
</div>






Related