Bootstrap vs Grid vs Flexbox
Bootstrap é um framework revolucionário para ganho de produtividade com JavaScript e CSS para desenvolvimento web com responsividade. Bootstrap 5 inclusive utiliza Flexbox em sua plenitude.
Flexbox é um conjunto de regras CSS que facilita a criação de layouts, e alinhamento fluido de elementos com cálculos automáticos baseados em porcentagens e tamanhos do viewport, sendo VW o Viewport Width (Largura da janela) e VH o Viewport height (Altura da janela).
Bootstrap porém é notório quanto a performance. Existem controvérsias quanto a sua utilização indiscriminada, quando apenas usamos 5%, as vezes 10% do que o framework oferece. Aí é que entra o Flexbox como alternativa.
Conceitualmente, flexbox e grid servem com mesma finalidade, e produzem os mesmos resultados utilizando sintaxe diferente. Supondo uma área de 300×300 onde queremos que todo seu conteúdo fique alinhado verticalmente e horizontalmente:
Flexbox
Não depende de bibliotecas. É suportado nativamente por todos os navegadores modernos. Pode ser declarado a qualquer momento.
{
width: 300px;
height: 300px;
/* flexbox */
display: flex;
/* alinhamento horizontal */
justify-content: center;
/* alinhamento vertical */
align-items: center;
}Grid
Não depende de bibliotecas. É suportado nativamente por todos os navegadores modernos. Pode ser declarado a qualquer momento.
{
width: 300px;
height: 300px;
display: grid;
/* alinhamento vertical */
place-content: center;
align-content: center;
/* alinhamento horizontal */
justify-content: center;
}Bootstrap
Bootstrap é uma biblioteca completa que já inclui regras tanto de flexbox quando de grid. É possível inclusive usar apenas o esquema de flexbox e grid para montar as colunas:
<!-- Carregamos o script apenas com o esquema de colunas --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-grid.min.css"> <!-- Alicamos as classes nas tags --> <div class="d-flex justify-content-center align-items-center">Conteúdos</div>
Conclusão
Qual dos dois é melhor? Bootstrap, Grid ou Flexbox? Antes de responder, precisamos analisar o contexto.
Bootstrap é uma biblioteca completa que consome recursos e aumenta o tempo de carregamento da aplicação. Começar um projeto com Bootstrap é uma ótima ideia, mas carregar um script Bootstrap apenas para resolver um pequeno problema de alinhamento de uma aplicação que já usa outros mecanismos de estilo, não vale a pena.
Quando o problema envolve apenas layout fluido, aplicar um design com flexbox ou grid resolve o problema, sem precisar aumentar o tempo de carregamento da aplicação. O ponto aqui é o seguinte: Não é necessário carregar um script bootstrap inteiro apenas para construção de uma grade responsiva, ou algo simples como tal.
Conteúdos relacionados:
WhatsAppO conteudo foi útil? Isso é fantástico. Quer incentivar mais posts como esse? Mostre seu apoio com qualquer valor.
Chave PIX: d0311e58-cb6e-4d47-b3d8-3d4254763ce7
