Início / coding / Perguntas / 79589894
Accepted
Max Koretskyi
Asked: 2025-04-24 13:47:27 +0800 CST

Flex-basis=0 deveria substituir a largura, mas não o faz

  • 772

Li que flex-basis deveria substituir width. Mas, neste exemplo, ambos os contêineres têm flex-basis:0, mas o segundo também tem width:50px"defined" e isso claramente tem o efeito de tornar o tamanho igual.

Então estou intrigado com duas coisas relacionadas:

  1. por que flex-basis:0 não substituiu a largura (eu não esperaria nenhum efeito ao adicionar widthao css)
  2. por que flex-basis:0 não funcionou para definir o tamanho hipotético como 0, resultando na largura igual sem adicionar largura

Pelo que entendi da especificação :

Determine o tamanho da base flexível e o tamanho principal hipotético de cada item:

  1. Se o item tiver uma base flexível usada definida, esse será o tamanho da base flexível.
  2. O tamanho principal hipotético é o tamanho da base flexível do item fixado de acordo com seus tamanhos principais mínimo e máximo usados ​​(e limitando o tamanho da caixa de conteúdo a zero).

Portanto, o tamanho da base flexível está definido e deve ser resolvido como 0. O tamanho principal hipotético também deve ser resolvido como 0, pois há restrições de largura mínima/máxima.

    .container1, .container2 {
        width: 210px;
        height: 200px;
        padding: 10px;
        border: solid;
        display: inline-flex;
        box-sizing: border-box;

        div {
            margin: 1px;
            flex: 1 1 0;
        }

        & div:nth-child(1) {
            background: lightpink;
        }

        & div:nth-child(2) {
            background: lightblue;
        }
    }

    .container2 div {
        width: 50px;
    }
<div class="container1">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>
<div class="container2">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>

insira a descrição da imagem aqui

html

1 respostas

  1. Best Answer

    Está faltando o Tamanho Mínimo Automático dos Itens Flexíveis . Aqui está a diferença entre os dois casos se você não habilitar o aumento.

    .container1,
.container2 {
  width: 250px;
  height: 200px;
  padding: 10px;
  border: solid;
  display: inline-flex;
  box-sizing: border-box;

  div {
    margin: 1px;
    flex: 0 1 0;
  }

  & div:nth-child(1) {
    background: lightpink;
  }

  & div:nth-child(2) {
    background: lightblue;
  }
}

.container2 div {
  width: 50px;
}
    <div class="container1">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>
<div class="container2">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>

    Primeiro, nenhum deles tem tamanho igual a 0. "curto" tem tamanho igual ao seu conteúdo e "longo" tem tamanho igual 50pxou igual ao seu conteúdo.

    Para fornecer um tamanho mínimo padrão mais razoável para itens flexíveis, o valor usado de um tamanho mínimo automático do eixo principal em um item flexível que não é um contêiner de rolagem é um tamanho mínimo baseado em conteúdo; para contêineres de rolagem, o tamanho mínimo automático é zero, como de costume.

    Em geral, o tamanho mínimo baseado no conteúdo de um item flexível é o menor entre sua sugestão de tamanho de conteúdo e sua sugestão de tamanho especificado .

    A sugestão de tamanho do conteúdo é baseada no que você forneceu (a palavra mais curta aqui) e a sugestão de tamanho especificada é a largura que você definiu. "longo" usa o mínimo entre ambos.

    Defina min-width: 0para desabilitar isso e você obterá o que espera:

    .container1,
.container2 {
  width: 250px;
  height: 200px;
  padding: 10px;
  border: solid;
  display: inline-flex;
  box-sizing: border-box;

  div {
    margin: 1px;
    flex: 0 1 0;
    min-width: 0;
  }

  & div:nth-child(1) {
    background: lightpink;
  }

  & div:nth-child(2) {
    background: lightblue;
  }
}

.container2 div {
  width: 50px;
}
    <div class="container1">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>
<div class="container2">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>

    Ambos os tamanhos são resolvidos para 0 (o texto está transbordando) e então ambos crescerão igualmente para preencher o espaço restante.

    • 2

relate perguntas