Olá pessoal, minha dúvida é a seguinte: como o flex sabe onde acaba e começa cada coluna, apenas pela mudança de nome do título do head?
Olá pessoal, minha dúvida é a seguinte: como o flex sabe onde acaba e começa cada coluna, apenas pela mudança de nome do título do head?
Oi, Lucas, tudo bem?
A propriedade display: flex; por padrão tem o comportamento de linha para os elementos, o valor row. Quando queremos que o elementos fiquem verticalmente utilizamos o propriedade, felx-direction: column para modificar o valor padrão. Sobre o espaçamento, que o seria onde acabar e onde começa ele divide o largura que está disposto o display: flex; pela quantidade dos elementos.
O display flex tem uma propriedade justify-content: center ou space-around ou space-between ou flex-start ou flex-end para posicionar esses elementos em colunas dentro da caixa. Mas a altura pré-definada em 250px permite que a altura das colunas tenha esse comportamento de quebra justamente com o display: flex e flex-flow: wrap;
Para saber mais: https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Flexbox
Qualquer dúvida é só falar!
Olá, pessoal.
Eu tenho a mesma dúvida que o Lucas. A Laís já explicou, mas sigo sem entender.
No exemplo da aula, temos 4 tags h4, cada uma com uma quantidade de tags a.
Como o flex quebrou a linha para que cada coluna começasse exatamente com o h4 ?
Oi, Luciana, tudo bem?
Na sessão Mapa de cursos há uma tag section que envelopa a lista de links de linguagens de cursos. A classe rodapePrincipal-navMap-list que é a classe que está na tag section está com display: flex, então, os seus filhos adquirem o comportamento flex, nesse caso, os titulos h4 e a. Por definição, o display-flex: define como um ítem será flexinado para caber no espaço disponível dentro de seu container. Então, temos um espaço definido que será dividido pelos itens que estarão dentro desse container.
O Flex sabe que h4 e a são filhos da classe rodapePrincipal-navMap-list que está definida como display: flex. E juntamente com a propriedade flex-flow: colunm-wrap que irá os links a para que fiquem em coluna e a definição do height: 250px ou seja, a junção das propriedades display: flex, flex-flow: wrap e height: 250px fizeram com que houvessem quebra das colunas.
Pessoal,
Na minha humilde opinião a quebra das colunas no ponto desejado só foi possível porque houve definição prévia da altura do elemento pai (height: 250px).