Flex

Flex en Storybook

Uso

El componente Flex es un componente técnico que facilita el uso del estilo CSS de Flex. Para obtener recomendaciones de uso, consulte la documentación oficial de cuadro flexible.

Código

<Flex>
  <FlexItem>
    <strong>First item</strong>
  </FlexItem>
  <FlexItem>
    <strong>Second item</strong>
  </FlexItem>
  <FlexItem>
    <strong>Third item</strong>
  </FlexItem>
</Flex>

Instrucción de importación

import { Flex, FlexItem } from '@jutro/layout';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

Propiedades de flex

alignContent

Tipo

'center' | 'baseline' | 'stretch' | 'start' | 'end'

Descripción

Aligns the flex within its container in the axis opposite to its direction.

alignItems

Tipo

'center' | 'baseline' | 'stretch' | 'start' | 'end'

Descripción

Aligns all items within the grid in the axis opposite to its direction.

direction

Tipo

'row' | 'rowReverse' | 'column' | 'columnReverse'

Descripción

Sets the flex direction.

Valor predeterminado

'row'

gap

Tipo

'none' | 'small' | 'medium' | 'large'

Descripción

The size of the gaps between rows and columns.

justifyContent

Tipo

'center' | 'baseline' | 'stretch' | 'start' | 'end'

Descripción

Justifies the content in the flex direction: horizontally if direction is 'row' (default) or vertically if direction is 'column'.

tag

Tipo

string

Descripción

Optional DOM tag to render.

Valor predeterminado

'div'

wrap

Tipo

boolean | 'true' | 'false' | 'reverse'

Descripción

Wrap (true), don't wrap (false), reverse wrap (reverse) flex items in the container.

phoneobsoleto

Tipo

string

Descripción

Flex properties that are used at the phone breakpoint.

phoneWideobsoleto

Tipo

string

Descripción

Flex properties that are used at the phoneWide breakpoint.

tabletobsoleto

Tipo

Flex

Descripción

Flex properties that are used at the tablet breakpoint.

themeobsoleto

Tipo

any

Descripción

Prop 'theme' is unused in the component and has no effect.

Propiedades de FlexItem

alignSelf

Tipo

'center' | 'baseline' | 'stretch' | 'start' | 'end'

Descripción

Aligns the flex item according to the cross axis of the flex direction.

basis

Tipo

number | string

Descripción

Specifies the initial length of a flex item.

grow

Tipo

number | string

Descripción

The standard flex grow property.

shrink

Tipo

number | string

Descripción

The standard flex shrink property.

tag

Tipo

string

Descripción

Optional DOM tag to render.

Valor predeterminado

'div'

textAlignobsoleto

Tipo

'left' | 'center' | 'right'

Descripción

Aligns the contents of the column horizontally.

visibleobsoleto

Tipo

boolean

Descripción

If set to false, the FlexItem is hidden. In any other case, the FlexItem is displayed.

Ganchos

No hay ganchos para Flex.

Claves de traducción

No hay traducciones para Flex.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Ejemplo de contenedor flexible básico

Un contenedor flexible básico de Jutro consta de un componente Flex con varios componentes secundarios. Si estos componentes secundarios son componentes FlexItem, puede utilizar las propiedades FlexItem adicionales para tener un mayor control del elemento dentro de la composición y disposición.

De forma predeterminada, el componente Flex de Jutro tiene la propiedad wrap establecida en true. Eso significa que los elementos tratan de ajustarse en el espacio horizontal disponible, pero, si no pueden hacerlo, aparecen en líneas posteriores.

<Flex>
  <FlexItem>
    <strong>First item</strong>
  </FlexItem>
  <FlexItem>
    <strong>Second item</strong>
  </FlexItem>
  <FlexItem>
    <strong>Third item</strong>
  </FlexItem>
</Flex>

Ejemplo de gap

La propiedad gap se utiliza para establecer la distancia entre las columnas en un contenedor flexible.

<h3>Small</h3>
<Flex gap="small">
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>
<h3>Medium</h3>
<Flex gap="medium">
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>
<h3>Large</h3>
<Flex gap="large">
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>
<h3>None</h3>
<Flex gap="none">
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>

Ejemplo de direction

La propiedad direction establece la disposición inicial de los elementos en un contenedor flexible. Su valor predeterminado es row, lo que significa que los elementos se colocan en la misma fila si hay espacio, comenzando desde el lado izquierdo de la pantalla, como se ve en los ejemplos anteriores.

Si establece direction en rowReverse, los elementos se colocarán en la misma fila, comenzando desde el lado derecho de la pantalla.

<Flex direction="rowReverse">
  <FlexItem>
    <strong>First item</strong>
  </FlexItem>
  <FlexItem>
    <strong>Second item</strong>
  </FlexItem>
  <FlexItem>
    <strong>Third item</strong>
  </FlexItem>
</Flex>

Si establece direction en column o columnReverse, los elementos se organizarán verticalmente de arriba a abajo o de abajo a arriba, respectivamente.

<Flex direction='column'>
    <FlexItem>
        <strong>First item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Second item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Third item</strong>
    </FlexItem>
</Flex>
<Flex direction='columnReverse'>
    <FlexItem>
        <strong>Fourth item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Fifth item</strong>
    </FlexItem>
    <FlexItem>
        <strong>Sixth item</strong>
    </FlexItem>
</Flex>

Registro de cambios

10.9.0

Flex cambia en la versión 10.9.0

Las siguientes propiedades Flex han quedado obsoletas:

• tablet
• phoneWide
• phone

Las siguientes opciones para las propiedades Flex han quedado obsoletas:

• alignItems: 'top', 'middle', 'bottom', 'right' y 'left'
• alignContent: 'top', 'middle', 'bottom', 'right' y 'left'
• justifyContent: 'top', 'middle', 'bottom', 'right' y 'left'

FlexItem cambia en la versión 10.9.0

Las siguientes propiedades FlexItem han quedado obsoletas:

• tablet
• phoneWide
• phone
• visible
• textAlign

Las siguientes opciones para las propiedades FlexItem han quedado obsoletas:

• alignSelf: 'top', 'middle', 'bottom', 'right' y 'left'