Please enable JavaScript.

Coggle requires JavaScript to display documents.

html - Coggle Diagram

- - - - << justify-content >>
        
        << flex-start >>
        
        Los elementos empiezan desde la izquierda
        
        << flex-end >>
        
        Los elementos empiezan desde el final o desde la parte derecha
        
        << flex-center >>
        
        Los elementos se ponen al centro
        
        << space-around >>
        
        Genera un espaciado en cada uno de los elementos. por lo cual el elemento inicial y el final tiene un espaciado de la mitad que los que no están en estas posiciones.
        
        Indica como van a organizarse los elementos de manera horizontal.
        
        << space-between >>
        
        Da un espaciado de elementos pero no pone nada al inicio ni al final. Ningún margen hacia los extremos.
        
        << space-evenly >>
        
        Da un mismo espaciado en todos los elementos
      - << align-items >>
        
        << flex-start >>
        
        Los elementos empiezan por el inicio, arriba. Es la opción por defecto.
        
        << flex-end >>
        
        Los elementos empiezan al final
        
        << center >>
        
        Los elementos se centran de manera vertical
        
        << baseline >>
        
        << stretch >>
        
        Permite alinear elementos de forma vertical
        
        Si aplica un solo hijo este se alinea por su cuenta.
      - << flex-direction >>
        
        << row-reverse >>
        
        << column >>
        
        << row >>
        
        << column-reverse >>
        
        R: Se refiere como va a ser la orientación de los elementos en CSS, en este caso se puede tratar de columnas o filas. Y tambien si estas serán tal como va o si va a ir el orde a la inversa.
        
        Se ponen en la etiqueta padre, la misma que tiene el la propiedad display: flex;
        
        Si se usan un "column". Las propiedades de "justify-content" y "align-items" se intercambian. "justiry-content" para a linear de manera vertical, y "align-items" de manera horizontal.
      - << order >>
      - << align-self >>
      - << flex-wrap >>
        
        << wrap >>
        
        << wrap-reverse >>
        
        << nowrap >>
        
        Indica si los elementos van a caer o no. Por defecto está en "nowrap" que indica que no carerá
      - << flex-flow >>
        
        << column wrap >>
        
        << row wrap >>
        
        R:
      - Se crea con div una etiqueta padre y dentro en el mismo nivel todas sus etiquetas hijos.l
      - Las etiquetas dentro de la etiqueta flex son llamadas las etiquetas hijos. o cajas
      - Se pone la propiedad de displey flex a la etiqueta padre y los demas estilos a las etiquetas hijos.
      - Por defecto cada elemento o caja que haya se pone uno al costado del otro. Pero si estos elementos llegan al final de la pantalla en la derecha se rompe el costado del otro se rompe el modelo de caja. Estos se mantienen pero el ancho se se comprime y el elemento se comporta flexible.
      - << flex-shrink >>
        
        Propiedad que indica la cantidad de encogimiento que tiene el elemento. Los valores que van a esta propiedad son de 0 a 1.
      - No funciona el margen colapsing. Que indicaba que si un 2 elementos tenían un margen. El que tenía el mayor margen es el que aplicaba. Y no se sumaban ambos margenes.
      - PROBLEMAS
      - Cuando se quiere centrar un elemento y sus hijos son de display block. Tal vez se pueda dar un tamaño a dichos elementos pero como que esto ya le quita algo al diseño.
      - Se quiere centrar a un elemento pero para esto se debería dar al display a su padre y sucede que si se lo da a su padre se rompe todo el diseño.
      - Hay bastante código y es muy dificil leer.