1
resposta

Utilizar flexbox ao invés de inline-block

Olá,

Estava testando o flexbox ao invés de inline-block e gostaria de saber se o resultado final traria uma diferença muito grande para um site, fugindo muito do esperado. Qual a melhor opção?

Segue o código CSS:

header {
    background: #cccccc;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
     position: absolute;
     top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a{
    color: #000000;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

.produtos {
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.produtos li {
    text-align: center;
    padding: 30px 20px;
    box-sizing: border-box;
    width: 20%; 
    margin: 0 1.5%;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}
1 resposta

Olá Paula, isso depende de como você quer que seus elementos se posicione na tela.

Se você quer utilizar os items alinhados em uma li, não tem problema algum de se utilizar o inline.

Agora se você precisa ajustar altura, espaçamento e ter uma flexibilidade maior, sugiro o display flex. Em todo caso, o inline é uma boa opção se atender aos seus requisitos.

Edit: OBS: Lembrando que display: inline ou inline-flex não permitem modificar o espaçamento de bordas e margens nos elementos que estão dentro dela.