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

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?

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

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.

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.