Dificuldades com FlexBox e UL

[Carcleo 4]

Pessoal, estou com uma dúvida que está me tirando o sono!

 

Então, vou exibir 2 situações com Flexbox onde 1 delas está dando uma falha. (Será mesmo?).

 

Nessa versão, com DIV's, tudo funciona bem:

CSS:

    span.vertical {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
    }
    span.comum {        
        
    }
    div.cabecalhoVertical{
        display: flex;
        height: 200px;
        border: .1px rgb(0,0,0) solid;
        
    }
    div.cabecalhoVertical div {
        display: flex;
        flex-grow: 1;
        list-style: none;
        border-right: .1px rgb(0,0,0) solid;
        align-items: center;
        justify-content: center;
    }
    div.cabecalhoVertical div span {
        text-align: center;
        font-weight: bolder;
    }

HTML:

<div class='cabecalhoVertical'>
    <div style='width:215px;'><span class='comum'   >Nome do Gcéu </span></div>
    <div style='width:215px;'><span class='vertical'>Supervisor</span></div>
    <div style='width:215px;'><span class='comum'   >Líder</span></div>
    <div style='width:035px;'><span class='vertical'>Houve Supervisão?</span></div>
    <div style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></div>
    <div style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></div>
    <div style='width:035px;'><span class='vertical'>Membros Compromissados</span></div>
    <div style='width:035px;'><span class='vertical'>Visitantes</span></div>
    <div style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>
    <div style='width:035px;'><span class='vertical'>Total de presentes</span></div>
    <div style='width:035px;'><span class='vertical'>Ofertas</span></div>                    
    <div style='width:035px;'><span class='vertical'>Disicpulados</span></div>                    
    <div style='width:035px;'><span class='vertical'>Número de decisões</span></div>            
</div>    

Resultado:

 

Agora com UL -> A falha:

 

CSS:

    span.vertical {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
    }
    span.comum {        
        
    }
    ul.cabecalhoVertical{
        display: flex;
        height: 200px;
        border: .1px rgb(0,0,0) solid;
        
    }
    ul.cabecalhoVertical li {
        display: flex;
        flex-grow: 1;
        list-style: none;
        border-right: .1px rgb(0,0,0) solid;
        align-items: center;
        justify-content: center;
    }
    ul.cabecalhoVertical li span {
        text-align: center;
        font-weight: bolder;
    }

HTML:

<ul class='cabecalhoVertical'>
    <li style='width:215px;'><span class='comum'   >Nome do Gcéu </span></li>
    <li style='width:215px;'><span class='vertical'>Supervisor</span></li>
    <li style='width:215px;'><span class='comum'   >Líder</span></li>
    <li style='width:035px;'><span class='vertical'>Houve Supervisão?</span></li>
    <li style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></li>
    <li style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></li>
    <li style='width:035px;'><span class='vertical'>Membros Compromissados</span></li>
    <li style='width:035px;'><span class='vertical'>Visitantes</span></li>
    <li style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></li>
    <li style='width:035px;'><span class='vertical'>Total de presentes</span></li>
    <li style='width:035px;'><span class='vertical'>Ofertas</span></li>                    
    <li style='width:035px;'><span class='vertical'>Disicpulados</span></li>                    
    <li style='width:035px;'><span class='vertical'>Número de decisões</span></li>            
</ul>    

Percebam agora na print como aparece um bloco adicional no lado esquerdo antes da primeira LI

 

Gostaria de saber 2 coisas:

 

1) Porquê isso acontece uma vez que list-style está setado para none nas LI's?

2) Como corrigir essa falha?

 

Obrigado a quem puder ajudar.

[Renan Leite 1]

Fala irmão, beleza?

 

1) Isso acontece porque as UL por padrão vem com essas propriedade aqui.  

 

    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;

Perceba a última propriedade: padding-inline-start: 40px;

É justamente ela que está dando esse espaçozinho dos inferno rsrs...

1.1) obs: Se quiser, crie uma ul qualquer e inspecione ela que você verá essas props padrões delas.

 

2) Para resolver isso diretamente, você pode tirar o padding dessa ul: 

ul.cabecalhoVertical{
  padding: 0;
  display: flex;
  height: 200px;
  border: .1px rgb(0,0,0) solid;        
}

Ou posso te passar uma prática minha, que eu gosto de fazer, que é resetar todos os paddings e margins de todos os elementos, e só adiciono padding e margin quando eu necessito,

Então fazendo o reset = 

* {
  margin: 0;
  padding: 0;
}

2.1) O * faz referências a todos os elementos do seu HTML, assim aplica o estilo que esta la dentro para todos os elementos.

 

Valeu irmão, abraços! Bons estudos

[Carcleo 4]

Cara, muiito top. Ops,  muito jóia.

 

Obrigado!

 

Essa prética, eu tamém uso. Mas estava fazendo esse texte em um arquivb seprsdo e nele e não coloquei o resset

* {
  margin: 0;
  padding: 0;
}

[Renan Leite 1]

@Carcleo

Boa irmão, que bom que resolveu, tmj!!