Estoy en el proceso de actualización de un viejo inline-blockgrid basado en el modelo que tengo a una nueva Flexbox uno que he creado. Todo ha funcionado bien, aparte de una pequeña pega, que se ha convertido en un poco de un dealbreaker:

Tengo un montón de CSS-controlado reguladores; así que hay un contenedor que contiene 100% de ancho, y en el interior es otro div: su anchura es también 100%, pero su white-space se establece en nowrap. El uso de inline-block, esto significaba que el interior de la divs (que fueron también al 100% de ancho) no ser obligado por sus padres limitaciones y envolver a la siguiente línea que acababa de llevar fluyendo fuera de la caja. Esto es exactamente lo que yo quería. Sin embargo, no puedo conseguir que esto funcione en absoluto con flexbox. Para referencia, aquí una imagen:

Flexbox: cómo conseguir divs para llenar hasta el 100% del contenedor de ancho sin envolver?

Y de referencia, aquí hay un jsFiddle de la cosa de trabajo con inline-block: http://jsfiddle.net/5zzvqx4b/

…y no de trabajo con Flexbox: http://jsfiddle.net/5zzvqx4b/1/

He probado todo tipo de variaciones con flex, flex-basis, flex-wrap, flex-grow, etc. pero para la vida de mí no puedo conseguir que esto funcione.

Nota que me puede la fuerza para hacer lo que quiero en un chapucero forma inflexible por la configuración de la .boxcontainer ancho para 200%. Que funciona para este único ejemplo, pero en algunos casos no voy a saber de antemano cuántos niño cajas habrá, y prefiero no recurrir a en línea de estilo en cada elemento, si es posible.

  • … no es una respuesta, pero ¿por qué quieres a cambio de flex, usted tiene un código de trabajo ya que es de prefijo libre, y funciona en más navegadores?
  • Porque de los otros requisitos del proyecto, que, en ~de 20.000 líneas de código, probablemente tendría un poco de tiempo para entrar.
  • oh, ok solo para decir que algunas de las propiedades de flexibilidad que establece que no hay aún necesarios, tales como la flex-direction: row;, justify-content: flex-start;, align-items: flex-start; esas son reglas por defecto, a menos que se sobrescriban. hay una gran guía de los aquí.
  • Gracias – de hecho, es muy detallado en el ejemplo, pero sólo porque me copia-n-pegado directamente de mi hoja de estilos, en la que hay un montón de condiciones y subclases, etc. cual es la razón por la que las propiedades se establece de forma explícita. No sé flexbox lo suficientemente bien como para escribir la parte superior de mi cabeza todavía!
  • hace sentidos, entonces, ser conscientes, compatibilidad del navegador con la flex es IE10+ con -ms* prefijo.
InformationsquelleAutor indextwo | 2015-06-06

3 Comentarios

  1. 50

    Para evitar la flexión de elementos de la contracción, de establecer el flex reducir el factor de a 0:

    La flex reducir el factor de determina el flex elemento se
    reducir en relación con el resto de la flex elementos en el flex
    contenedor cuando es negativo espacio libre se distribuye. Cuando se omite, es
    conjunto a 1.

    .boxcontainer .box {
      flex-shrink: 0;
    }

    CSS:

    * {
      box-sizing: border-box;
    }
    .wrapper {
      width: 200px;
      background-color: #EEEEEE;
      border: 2px solid #DDDDDD;
      padding: 1rem;
    }
    .boxcontainer {
      position: relative;
      left: 0;
      border: 2px solid #BDC3C7;
      transition: all 0.4s ease;
      display: flex;
    }
    .boxcontainer .box {
      width: 100%;
      padding: 1rem;
      flex-shrink: 0;
    }
    .boxcontainer .box:first-child {
      background-color: #F47983;
    }
    .boxcontainer .box:nth-child(2) {
      background-color: #FABCC1;
    }
    #slidetrigger:checked ~ .wrapper .boxcontainer {
      left: -100%;
    }
    #overflowtrigger:checked ~ .wrapper {
      overflow: hidden;
    }

    HTML:

    <input type="checkbox" id="overflowtrigger" />
    <label for="overflowtrigger">Hide overflow</label><br />
    <input type="checkbox" id="slidetrigger" />
    <label for="slidetrigger">Slide!</label>
    <div class="wrapper">
      <div class="boxcontainer">
        <div class="box">
          First bunch of content.
        </div>
        <div class="box">
          Second load  of content.
        </div>
      </div>
    </div>

    • Oh buen señor gracias. He hecho caso omiso de la flex-shrink propiedad porque las descripciones que había leído no parece relevante. Consideras aceptado en… 6 minutos!
  2. 31

    Puede utilizar la abreviatura flex de la propiedad y la puso a

    flex: 0 0 100%;

    Que flex-grow, flex-shrink, y flex-basis en una línea. Flex retráctil que se ha descrito anteriormente, la flexibilidad de crecer es el opuesto, y flex base es el tamaño del contenedor.

  3. 14

    En mi caso, usando sólo flex-shrink: 0 no funciona. Pero la adición de flex-grow: 1 a lo trabajado.

    .item {
        flex-shrink: 0;
        flex-grow: 1;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here