Flexbox vs Twitter Bootstrap (ou estrutura semelhante) [fechado]

161

Eu descobri recentemente Flexboxquando estava procurando uma solução para tornar os divs a mesma altura, dependendo da mais alta.

Eu li a página a seguir no CSS-tricks.com e me convenceu de que flexboxé um módulo muito poderoso para aprender e usar. No entanto, isso também me fez pensar no fato de o Twitter Bootstrap (e estruturas similares) oferecerem o mesmo tipo de funções (+ é claro, muito mais) com seus sistemas de grade.

Agora, as perguntas são: Quais são os prós e os contras flexbox? Existe algo que não se pode fazer com o Flexbox que se pode fazer com uma estrutura como o Bootstrap (obviamente falando puramente sobre o sistema de grade)? Qual deles é mais rápido quando implementado em um site?

Acho que quando apenas para o sistema de grade é mais inteligente usar puramente flexbox, mas e se você já estiver usando uma estrutura, há algo a flexboxacrescentar?

Existem razões para escolher flexboxo "sistema de grade" em vez de um framework?

Rvervuurt
fonte
5
Eu uso o Flexbox com o Bootstrap.
Aibrean
2
Dê uma olhada na Fundação para aplicativos do Zurb . é inteiramente construído em cima do Flexbox Grid System
Salem Ouerdani
2
Isso pode ser útil. Bootstrap agora mudando de floats para flex
Faizan Akram Dar
1
O Bootstrap 4 agora é flexbox por padrão! O Flexbox é uma ferramenta de layout imensamente poderosa, fornecendo flexibilidade e controle incomparáveis ​​ao sistema de grade e aos componentes principais. Ele custa o suporte ao IE9, mas traz melhorias significativas no layout, alinhamento e dimensionamento de componentes.
Nermien Barakat
5
Não concordo que isso deva ser fechado como uma opinião. O autor está procurando fatos, não opiniões. "Quais são os prós e os contras do flexbox?" O solicitante (como eu) está tentando determinar o ponto forte e as desvantagens de cada sistema.
precisa saber é o seguinte

Respostas:

107

Por algumas razões, o flexbox é muito melhor que o bootstrap:

  • O Bootstrap usa carros alegóricos para criar o sistema de grade, o que muitos diriam não ser destinado à Web, onde a flex-box faz o oposto, permanecendo flexível com o tamanho e o conteúdo dos itens; mesma diferença que usar pixels vs em / rem, ou controlar apenas os divs usando margens e preenchimento e nunca definir um tamanho predefinido.

  • O Bootstrap, por usar flutuadores, precisa de clearfix após cada linha, ou você terá divs desalinhados de diferentes alturas. A Flex-box não faz isso e, em vez disso, verifica a div mais alta no contêiner e adere à sua altura.

A única razão pela qual eu usaria o bootstrap sobre o flex-box é a falta de suporte ao navegador (principalmente o IE) (já morra). E, às vezes, você obtém um comportamento diferente do Chrome e do Safari, embora ambos usem o mesmo mecanismo de kit da web.

Editar:

BTW, se o único problema que você está enfrentando são as colunas de altura igual, existem algumas soluções para isso:

  • Você pode usar display: tableno pai, display: table-cell;no filho. Consulte Como obter a mesma altura na tela: célula de tabela

  • Você pode usar o posicionamento absoluto em cada div:
    position: absolute; top: 0; bottom: 0;

  • Há também a solução jquery / JS e outra solução que não me lembro no momento que tentarei adicionar mais tarde.

Edição 2:

Verifique também http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties sobre como funciona a flex-box.

Editar 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Edição 4: https://caniuse.com/#feat=flexbox

ctf0
fonte
1
Obrigado por seu comentário. Não consegui encontrar explicações sobre o que era o "melhor" dos dois, por isso espero que minha pergunta (e suas respostas futuras) ajude as pessoas a decidir. Felizmente, o IE 11 está obtendo uma participação de mercado maior agora do que as três versões anteriores combinadas (das quais o IE10 suporta flexbox), então, aos meus olhos, é seguro usá-lo. Qual a sua opinião sobre o uso de uma combinação de estrutura e flexbox? Ignorar o sistema de grade da estrutura enquanto o usa, é claro.
Rvervuurt
2
O Flexbox pode ser usado para criar um sistema de grade mais poderoso de uma maneira mais fácil, mas não é um sistema de grade por si só. Melhor, mais simples Grade Sistemas mostra algumas idéias e Fundação ZURB para Apps usa flexbox para fins de layout
ckuijjer
na verdade, você pode usar os dois, se quiser, o que eu acredito ser a melhor escolha, porque você não precisa se preocupar com algo com o qual você já está acostumado há algum tempo (como aqueles que não sabem nada além BS), mas para mim o ponto de venda do flex-box é que ele tem a mesma flexibilidade que você só pode obter usando JS, mas sem escrever uma única linha de código.
ctf0
Dados completos de compatibilidade: caniuse.com/#feat=flexbox Observe que o Android mais antigo também tem problemas.
Cvrebert
barragem, e eu pensei que estamos quase lá de usá-lo, parece que vai demorar mais um ano ou algo b4 vemos isso na natureza, obrigado pelo heads-up.
Ctf0
6

Eu não uso o Flexbox (eu li sobre isso e parece ótimo), mas sou um desenvolvedor de front-end do Bootstrap. Sugiro que você teste as páginas de impressão Flexbox antes de tomar uma decisão final. Você sabe ... Às vezes, os estilos de impressão são uma terrível dor de cabeça e o Bootstrap me ajuda muito quando preciso criar formatos de impressão.

Kurroman
fonte
isso é exatamente por que você iria usar a grade de flutuação só para os divs imprimíveis em conjunto com as classes de bootstrap de impressão
ctf0
1

Receio que você tenha perdido outro artigo sobre truques de CSS :

Nota: O layout do Flexbox é mais apropriado para os componentes de um aplicativo e layouts de pequena escala, enquanto o layout da grade é destinado a layouts de maior escala.

Não significa que você não pode tentar, mas pense duas vezes. E tudo depende do suporte ao navegador desejado no final.

Kout
fonte
24
Certifique-se de entender que o artigo está falando sobre um novo layout de grade emergente - não sobre a grade de inicialização.
### getetbro #
5
Devo dizer que senti falta disso! :) Obrigado pela correção.
1040
Upvoted, você têm apontado uma distinção muito clara como a forma de utilizar a caixa flex e grade sem conflito de intenção e propósito, e para mim, não importa se você grade de bootstrap média ou grade ayout
Ahmad Farouk