Get best of the week

Todo sobre la palabra clave automática en CSS

CSS tiene una palabra clave autoque puede usar cuando trabaja con varias propiedades de elementos. Estas son propiedades que afectan la posición, altura y ancho de los elementos. Estas son propiedades diseñadas para ajustar la sangría de los elementos y sus otras características. Tenía un deseo en algún lugar de grabar todo lo que sé auto. Por ejemplo, para organizar todo esto en forma de material que podría convertirse en una referencia para aquellos que estén interesados ​​en las complejidades del uso de esta palabra clave.

La palabra clave autotiene un significado especial cuando se usa con varias propiedades CSS. Analizaremos las características autorelacionadas con la aplicación de este valor a varias propiedades. Aquí, en primer lugar, nos interesarán los detalles técnicos del trabajo.



auto. También hablaremos sobre cómo aprovechar al máximo esta propiedad. Aquí encontrará notas sobre autocasos de uso y ejemplos.

Propiedad de ancho: auto


El ancho inicial de los elementos de bloque, como <div>o <p>, es el valor auto. Esto lleva al hecho de que tales elementos ocupan todo el espacio horizontal del bloque que los contiene.

El “ancho del bloque que contiene el elemento” es, de acuerdo con la especificación CSS, un valor calculado por la siguiente fórmula:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’

Cuando la anchura del elemento especificado valor auto, se puede configurar propiedades tales como margin, padding, bordery es, por lo tanto, no será mayor que su elemento padre. El ancho del bloque que restringe el contenido del elemento del bloque será el tamaño del contenido menos el ancho de sus partes definidas por las propiedades margin(campo, sangría externa), padding(sangría interna) y border(borde).


Comparación de ancho: automático y ancho: 100%

Considere, como ejemplo, las características del dispositivo de los diseños anteriores.

Aquí está el marcado HTML:

<div class="wrapper">
  <div class="item"></div>
</div>

Aquí está el CSS:

* {
    box-sizing: border-box;
}

.wrapper {
      max-width: 600px;
      margin: 2rem auto 0;
      padding: 1rem;
}

.item {
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

Aquí todo se ve como debería, el contenido está limitado al elemento padre.


El elemento está dentro del elemento padre.

¿Y qué sucede si especifica que el ancho del elemento (width) no debe especificarse como un valorauto, pero cómo100%? Con este enfoque, el elemento ocupará el 100% del ancho del elemento padre, al que se agregará el espacio asignado a los márgenes derecho e izquierdo. Aquí está el estilo apropiado:

.item {
      width: 100%;
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

Pero qué sucede después de aplicarlo a un elemento.


El elemento se extiende más allá del elemento padre (la dirección del texto es ltr).

El elemento es ancho568px . Se calcula de la siguiente manera:

‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ = 15 + 16 + 506 + 16 + 15 = 568px

Si la propiedad se directionestablece en un valor ltr, el valor margin-rightse ignorará por completo. En nuestro caso, esto es exactamente lo que sucede. Sin embargo, si se directionregistra rtl, se ignorará margin-left.


El elemento va más allá del elemento padre (la dirección del texto es rtl).

Aquí puede experimentar con el código de ejemplo.

▍ Casos de uso para ancho: auto


Para comprender correctamente el significado auto, no hay suficiente historia sobre los conceptos básicos. Por lo tanto, realicé algunas investigaciones destinadas a mostrar escenarios para el uso práctico de la propiedad width: auto.

Distintos anchos de elementos en las versiones móviles y de escritorio de la página.



Opciones de aplicaciones móviles y de escritorio

Hay un grupo de botones. Es necesario que en la versión móvil de la aplicación estén ubicados uno al lado del otro (un elemento que contenga un botón debe ocupar el 50% del elemento principal). En la versión de escritorio de la aplicación, cada botón debe ocupar todo el ancho del contenedor principal. ¿Cómo hacerlo?

Aquí está el marcado HTML:

<div class="group">
    <div class="group__item">
        <button class="c-button">Sign In</button>
    </div>
    <div class="group__item">
        <button class="c-button c-button--ghost">Register</button>
    </div>
</div>

Para colocar botones uno al lado del otro en la versión móvil de la página, utilicé el diseño de flexbox. Aquí está el CSS relevante:

.group {
    display: flex;
}

.group__item {
    width: 50%;
}

En la versión de escritorio, necesito que los botones ocupen todo el ancho del elemento primario. Puede haber una tentación de usar el diseño width: 100%. ¿Verdad? Pero hay una mejor solución:

@media (min-width: 800px) {
    /*    flexbox-    */
    .group {
        display: block;
    }

    .group__item {
        width: auto;
    }
}

Dado que .group__itemeste es un elemento de bloque, el uso width: autolleva al hecho de que este elemento llena perfectamente el espacio disponible en su elemento padre.

Aquí hay una versión funcional de este ejemplo.

Propiedad de altura: auto


Si consideramos trabajar con una propiedad heightque establece la altura de los elementos, entonces todo se ve diferente. La altura del elemento, al aplicar un valor auto, corresponde a la altura del contenido del elemento.

Considere el siguiente ejemplo:

<div class="wrapper">
  <div class="item">What's my height?</div>
</div>

Para que un elemento con una clase .itemocupe toda la altura del contenedor, puede usar uno de los siguientes métodos:

  1. Puede establecer un elemento con una clase de .wrapperaltura fija y luego agregar una .itempropiedad al estilo del elemento height: 100%.
  2. Puede usar el .wrapperdiseño de flexbox para el elemento , de modo que el elemento secundario .item, de forma predeterminada, se estire al tamaño del elemento principal.

Aquí está el CSS:

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}


Elementos primarios y secundarios

Campos y palabra clave auto


Los campos (márgenes externos) se utilizan con mayor frecuencia para el centrado horizontal de elementos cuyo ancho se conoce.

Considera un ejemplo.


El elemento a centrar. El

rectángulo azul debe estar centrado horizontalmente. Para este propósito, puede usar el siguiente estilo:

.element {
    margin-left: auto;
    margin-right: auto;
}

Volviendo a la especificación CSS:

si las propiedades 'margen izquierdo' y 'margen derecho' están configuradas en 'auto', el ancho de los márgenes es el mismo. Esto conduce a la alineación horizontal del elemento en relación con los bordes del bloque, incluido él.


Los campos de un elemento tienen el mismo ancho.

Aquí hay una demostración de este ejemplo.

▍Uso del margen: propiedad automática para elementos posicionados absolutamente



Elemento centrado

Otro escenario, menos común, para aplicar un valorautoes centrar elementos posicionados absolutamente usando una construcciónmargin: auto. Si hay un elemento que necesita estar centrado dentro del elemento padre, tanto horizontal como verticalmente, puede parecer que necesita usar la propiedadtranslateXopara estotranslateY.

Para que la propiedadmargin: autonos permita alinear correctamente el elemento, se deben cumplir las siguientes condiciones:

  1. Se especifican el ancho y el alto del elemento.
  2. Se establece la propiedad del elemento position: absolute.

Aquí está el marcado HTML:

<div class="wrapper">
  <div class="item">I am centered.</div>
</div>

Aquí está el código de estilo:

.wrapper {
    position: relative;
}

.item {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Aquí hay una demostración de esta técnica de alineación.

Diseños de Flexbox y personalización de campo automática


El uso de campos configurados automáticamente puede, en algunos casos, ser un truco muy útil. Si el elemento secundario tiene un campo cuyas dimensiones se establecen utilizando el valor auto, se desplazará al máximo en el elemento primario al lado opuesto al campo configurado. Por ejemplo, si se asigna una propiedad a un elemento flexible margin-left: auto, se desplazará al máximo a la derecha.

Veamos el siguiente diseño. Hay dos elementos secundarios rectangulares ubicados en el elemento padre flexbox.


Un par de elementos en un contenedor flexbox

Necesitamos que el elemento # 2 se mueva al borde derecho del contenedor. Usar el valorautode la propiedad esexcelentepara estomargin-left:

.wrapper {
    display: flex;
}

.item-2 {
    margin-left: auto;
}

Esto es lo que sucedió después de aplicar este estilo.


El elemento número 2 se mueve al borde derecho del contenedor.

Cabe señalar que esta técnica también funciona con los elementos alineados verticalmente. En este ejemplo, aplique el siguiente estilo del elemento # 2:

.item-2 {
    margin-top: auto;
}

Aquí está el resultado.


El elemento n. ° 2 se mueve al borde inferior del contenedor.

Además, si solo hay un elemento hijo, para alinearlo tanto horizontal como verticalmente, puede usar la propiedadmargin: auto. Suponga que en el contenedor solo hay un elemento número 1, que debe alinearse así como así. Para hacer esto, usamos el siguiente estilo:

.item-1 {
    margin: auto;
}

Esto es suficiente para centrar el elemento.


Artículo # 1 centrado en el contenedor

▍ Propiedad flexible y valor automático


Al desarrollar diseños de flexbox, puede usar la propiedad para elementos secundarios flex: auto. ¿Qué significa este diseño? El hecho es que cuando un elemento secundario tiene una propiedad flex: auto, esto es equivalente al hecho de que al elemento se le asigna un estilo flex: 1 1 autosimilar a la siguiente construcción:

    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }

Esto es lo que dice MDN sobre esto : “Las dimensiones de un elemento se determinan de acuerdo con sus propiedades widthy height, pero el elemento se puede estirar, ocupando espacio libre adicional disponible en el contenedor flexible. Un elemento, para caber en un contenedor, puede y está comprimido a su tamaño mínimo. Esto es similar al estilo de configuración flex: 1 1 auto".

En otras palabras, el tamaño del elemento con la propiedad flex: autose establecerá en función de su ancho y alto. Pero este elemento puede estirarse o contraerse según la cantidad de espacio disponible en el contenedor. No sabía sobre esto hasta que comencé a investigar para este artículo.

Como de costumbre, considere un ejemplo.

Aquí está el marcado:

<div class="wrapper">
  <div class="item item-1">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

Aquí están los estilos:

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    height: 500px;
}

.item-1 {
    flex: auto;
}

Y aqui esta el resultado.


Uso de flex: auto

Aquí hay una versión funcional de este ejemplo.

Diseños de cuadrícula y valor automático


AutoUtilice auto para ajustar columnas



Uso de las columnas de plantilla de cuadrícula: estilo 1fr 1fr automático

Al desarrollar diseños de cuadrícula, puede usar el valorautoal configurar las columnas. Esto significará que el ancho de las columnas dependerá del tamaño de su contenido. Esto es lo que quiero decir:

.wrapper {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
}

▍Diseños de cuadrícula y uso de valor automático para establecer campos


Cuando se usan diseños de cuadrícula, el valor autose puede usar para personalizar los campos del elemento. Esto se hace para obtener resultados similares a los alcanzados cuando se usa autoen diseños de Flexbox. Si estamos trabajando con un diseño de cuadrícula, y uno de los elementos de la cuadrícula tiene, por ejemplo, un estilo margin-left: auto, se moverá al lado derecho del diseño y su ancho se seleccionará en función del tamaño de su contenido.

Considere el siguiente ejemplo.


Diseño de cuadrícula

Necesitamos que el ancho de un elementoItem 1dependa de su contenido y no del espacio de cuadrícula disponible. Para hacer esto, podemos usar el siguiente estilo:

    .item-1 {
        margin-left: auto;
    }

Aquí está el resultado de aplicar este estilo.


El ancho de un elemento depende de su contenido.

▍Diseños RTL


Vale la pena señalar que el uso de propiedades margin-left: autoo se margin-right: automuestra bien para diseños LTR (para diseños en los que el contenido se encuentra de izquierda a derecha), por ejemplo, para aquellos que se utilizan para mostrar textos escritos en inglés. Pero tenga en cuenta que en sitios multilingües estos significados se invierten. Aún mejor, y recomendaría hacer exactamente eso, usando propiedades Flexbox o Grid en tales maquetas, haciendo esto en los casos en que el objetivo se pueda lograr con su ayuda. Si esto no se puede lograr con la ayuda de tales propiedades, recurra a establecer propiedades de margen utilizando autosolo como último recurso. En cambio, es mejor usar las propiedades lógicas de CSS .

Propiedad de desbordamiento


Cuando trabajamos con elementos de páginas web, necesitamos saber sobre el tamaño del contenido que estos elementos pueden contener. Si el contenido es más grande de lo que puede contener el elemento, debe mostrar la barra de desplazamiento para trabajar con dicho contenido.

Para resolver este problema, puede intentar usar el siguiente estilo:

.element {
    overflow-y: scroll;
}

Pero con este enfoque, puede aparecer una barra de desplazamiento incluso si el elemento muestra contenido cuyo tamaño no excede el tamaño del elemento. Aquí hay un ejemplo.


Elemento al que se asigna el estilo overflow-y: scroll

En el navegador Chrome en la plataforma Windows, siempre se muestra la barra de desplazamiento. Este es un ejemplo de un mal comportamiento del elemento que puede confundir al usuario.

El uso en lugar de este valor leautopermite asegurarse de que la barra de desplazamiento se mostrará solo en los casos en que la altura del contenido supere la altura del contenedor.

Losiguiente se indicaen MDN : “Depende del agente de usuario. Si el contenido se coloca en el área del elemento correspondiente al espacio interno del elemento, tiene el mismo aspecto que el contenido que se muestra en el modovisiblepero esto crea un nuevo contexto de formato de bloque. "Los navegadores de escritorio muestran barras de desplazamiento si el contenido es mayor que el tamaño del elemento".

Propiedades para posicionar elementos


CSS-propiedades responsables para el posicionamiento de elementos, tales como top, right, bottomy left, se mantiene el valor auto. De lo que quiero hablar ahora, lo aprendí durante la redacción de este artículo.

Considere el siguiente diseño.


Diseño de demostración

Hay un elemento padre con una propiedad personalizadapaddingque define la sangría. Este elemento tiene otro elemento, un hijo. El elemento hijo está absolutamente posicionado, pero sus propiedades, que son responsables del posicionamiento, no están configuradas. Aquí están los estilos:

.wrapper {
    position: relative;
    padding: 16px;
}

.item {
    position: absolute;
    width: 100px;
    height: 100px;
}

El hecho es que en CSS, cada propiedad tiene un cierto valor inicial (el valor predeterminado). Si examina un elemento hijo y observa los estilos calculados, ¿cuál será el valor de su propiedad left?


Examinando los estilos calculados del niño.

El valor predeterminado para la propiedadleftes este16px. ¿De dónde vino si ni siquiera le preguntamos? La razón de esto es que las propiedades de un elemento posicionado absolutamente son consistentes con su padre más cercano cuya propiedad está establecidaposition: relative. El elemento padre tiene una propiedadpadding: 16px. Esto hace que el niño se coloque a 16 píxeles de los lados superior e izquierdo del padre. Interesante, ¿verdad?

Ahora puede tener una pregunta sobre cuál es el uso de esto para nosotros. Propongo lidiar con esto.

Imagine que un niño necesita ser colocado en100pxdesde el borde izquierdo del elemento principal al visualizar la página en pantallas pequeñas, y en pantallas grandes puede colocar el elemento donde se ubicaría al aplicar los valores predeterminados.

Aquí hay un estilo adecuado para pantallas pequeñas:

.wrapper {
    position: relative;
}

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

¿Cómo restablecer el valor de la propiedad leftal ver una página en pantallas grandes? Además, el valor left: 0aquí no se puede usar, ya que esto conducirá al hecho de que el elemento hijo se presiona hasta el borde del elemento padre, pero no lo necesitamos. Eche un vistazo al diseño de página que se muestra a continuación. Aclara mi punto.


El elemento secundario no se comporta correctamente.

Para restablecer las propiedades de posicionamiento del elemento secundario, debe usar la construcciónleft: auto. Esto se indica en el MDN de la siguiente manera: "Un elemento se coloca horizontalmente como se tendría que colocar si fuera un elemento estático".

Esto significa que al colocar el elemento, se tendrá en cuenta la propiedad del elementopaddingprimario y se asegurará de que el elemento secundario no se "pegue" al borde del elemento primario.

Aquí está el CSS:

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

@media (min-width: 800px) {
    .item {
        /*  -  left: 16px */
        left: auto;
    }
}

Lo mismo se aplica a una propiedad top. Los valores calculados de las propiedades righty bottomestablecidas de forma predeterminada son equivalentes, respectivamente, al ancho y alto del elemento.

Aquí hay un proyecto de demostración para esta sección.

Ejemplos de uso del valor automático


Debo decir de inmediato que los ejemplos dados aquí no cubren todas las posibilidades de significado auto, pero espero que lo que les diga sea útil.

▍ Flecha de información sobre herramientas


Al crear información sobre herramientas, deben tener una flecha que apunte al objeto al que se refiere la información sobre herramientas. Entonces estos consejos son más comprensibles. En el caso de que estemos desarrollando un sistema de diseño, debemos proporcionar diferentes estados de avisos. Por ejemplo, aparece una flecha que apunta hacia la izquierda y una flecha que apunta hacia la derecha.


Flechas direccionales que apuntan en diferentes direcciones.

.tooltip:before {
    /*   */
    position: absolute;
    left: -15px;
}

/*    ,   */
.tooltip.to-right:before {
    /*   */
    position: absolute;
    left: auto;
    right: -15px;
}

Tenga en cuenta que usé la propiedad left: autopara anular la propiedad left: -15pxen la implementación original. Y para que lo sepas, esto se usa con bastante frecuencia. Por lo tanto, recomendaría usar lo siguiente en lugar del enfoque anterior:

.tooltip:before {
    position: absolute;
    right: 100%;
}

.tooltip.to-right:before {
    /*   */
    position: absolute;
    right: auto;
    left: 100%;
}

Al usar un valor 100%, evitamos usar un valor fijo (ancho de flecha), que puede provocar un mal funcionamiento del sistema si cambia el tamaño de la flecha. Esta solución se adapta mejor a posibles cambios futuros.

▍ Tarjeta de componente


Quizás su proyecto tenga una tarjeta de componente en la cual, en la esquina superior izquierda, hay algún tipo de icono. Puede desempeñar un papel decorativo, o puede ser un botón para realizar una acción. Independientemente de la función del icono, los componentes deben diseñarse de modo que el icono pueda colocarse tanto en su esquina superior izquierda como en su esquina superior derecha. Así es como se ve.


Tarjeta de componente con un icono que se encuentra en diferentes ángulos

Al usar una propiedad,left: autopuede restablecer fácilmente el valor de la propiedad especificada en su implementación básica. Aquí está el CSS:

.card .icon {
    position: absolute;
    left: 15px;
    top: 15px;
}

.card.is-right .icon {
    left: auto;
    right: 15px;
}

▍Diseños de Flexbox y valor de la propiedad de margen automático


Los diseños de Flexbox brindan a los desarrolladores web posibilidades realmente infinitas. Al combinar las capacidades de tales diseños con campos, cuyo valor se utiliza para configurarlos auto, podemos crear diseños muy potentes.

Considere el siguiente ejemplo.


Ajuste automático de los campos del elemento

Hay un contenedor vertical que contiene el título del elemento, su descripción y el botón ubicado a la derecha. Necesitamos que el botón se adjunte al lado derecho del contenedor.

Aquí está el marcado:

<div class="item">
    <div class="item-group">
        <!--    -->
    </div>
    <button class="item__action">Confirm</button>
</div>

Aquí están los estilos:

    .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .item__action {
        margin-left: auto;
    }

¡Hecho! El uso de la propiedad le margin-left: autopermite colocar el botón en la esquina superior derecha del elemento. Lo que es aún mejor es que podemos usar propiedades lógicas de CSS si estamos desarrollando un sitio multilingüe. El CSS será algo como esto:

.item__action {
    margin-inline-start: auto;
}

Si desea saber más sobre el estilo RTL, aquí hay un recurso útil dedicado a este tema.

▍Diseños de cuadrícula y valor de margen automático


Al ajustar los campos de los elementos de la cuadrícula, puede establecer valores fijos y de porcentaje, y también puede usar el valor auto. Estoy particularmente interesado en el significado auto. Eche un vistazo al siguiente diseño.


Diseño de cuadrícula

Aquí hay un fragmento del marcado:

<p class="input-group">
    <label for="">Full Name</label>
    <input type="email" name="" id="">
</p>

Aquí están los estilos:

.input-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: 0.7fr 2fr;
  }
}

Me gustaría alinear las etiquetas, elementos label, en el borde izquierdo de los campos para ingresar datos (elementos input). Para hacer esto, debe aplicar el siguiente estilo:

.input-group label {
    margin-left: auto;
}

La aplicación de este estilo dará como resultado el resultado que se muestra en la siguiente figura.


Subtítulos alineados a la izquierda para la entrada de datos

▍ Diseño de ventanas modales



Ventana modal

Cuando se trabaja en el diseño de ventanas modales, es importante tener en cuenta que los contenidos que deben mostrarse en la ventana pueden no encajar completamente en ella. Para que la ventana funcione normalmente en esta situación, puede usar el siguiente estilo:

.modal-body {
    overflow-y: auto;
}

Gracias a este estilo, la barra de desplazamiento aparece solo si el contenido de la ventana es lo suficientemente grande.

Resumen


En este artículo, examinamos las características de aplicar la palabra clave autoen CSS. Esperamos que encuentre útil lo que leyó hoy.

¡Queridos lectores! ¿En qué situaciones usas valor autoen CSS?

More articles:


All Articles