css Diferencia entre pantalla: inline-flex y pantalla: flex



3 Answers

flex y inline-flex aplican diseño flex a los niños del contenedor. Contenedor con display:flex comporta como un elemento de nivel de bloque, mientras que display:inline-flex hace que el contenedor se comporte como un elemento en línea.

css css3 flexbox

Tengo dificultad para entender la display:inline-flex; propiedades display:inline-flex; . ¿Cuál es la diferencia entre la display:inline-flex; y display:flex; ?

Estoy tratando de alinear verticalmente algunos elementos dentro de la envoltura de ID. Es por eso que di la display:inline-flex; la propiedad display:inline-flex; a esta ID; Porque la envoltura de identificación es el contenedor flexible.

Pero no hay diferencia en la presentación. Esperaba que todo en la identificación del contenedor se mostrara en inline .

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>

Ejemplo de JSFiddle

¿Cuál es la diferencia?




Bien, al principio sé que puede ser un poco confuso, pero la display está hablando del elemento padre, por lo que significa cuando decimos: display: flex; , se trata del elemento y cuando decimos display:inline-flex; , también está haciendo el propio elemento en inline ...

Es como hacer un div línea o bloque , ejecute el fragmento de código a continuación y puede ver cómo la display flex divide en la siguiente línea:

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}
<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>

También crea rápidamente la imagen a continuación para mostrar la diferencia de un vistazo:




Necesitas un poco más de información para que el navegador sepa lo que quieres. Por ejemplo, a los niños del contenedor se les debe decir "cómo" flexionarse.

Violín actualizado

He añadido #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } a su CSS y se cambió inline-flex a flex , y puede ver cómo los elementos ahora se separan uniformemente en la página.






Related