Primer CSS Flexbox Justificar contenido

Posted on by Rudeus Greyrat

Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí.

Primer CSS Flexbox Justify Las clases de contenido se utilizan para distribuir el espacio entre y alrededor de elementos flexibles a lo largo del eje principal del contenedor. Hay algunas clases que se pueden usar para establecer la alineación de elementos flexibles que se mencionan y describen a continuación.

Primer CSS Flexbox Justificar clases de contenido:

  • flex-justify-start: esta clase se usa para alinear elementos flexibles con la línea de inicio.
  • flex-justify-end: esta clase se usa para alinear elementos flexibles con la línea final.
  • flex-justify-center: esta clase se usa para alinear elementos flexibles en el medio del contenedor.
  • flex-justify- between: esta clase se usa para distribuir elementos flexibles de manera uniforme en el contenedor
  • flex- justify-around: esta clase se usa para distribuir elementos flexibles de manera uniforme, con la misma cantidad de espacio alrededor de ellos.

Sintaxis:

<div class="border d-flex flex-justify-start">
     ...
</div>

Ejemplo 1: a continuación se muestran ejemplos que ilustran el Contenido de justificación de Flexbox de Primer CSS utilizando la clase flex-justify-start . 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <h1 class="color-fg-success text-center">
            GeeksforGeeks
        </h1>
        <h4 class="text-center font-bold">
            Primer CSS Flex Direction
        </h4>
        <strong>Flexbox Container flex-justify-start Class:</strong>
        <br>
        <div class="border d-flex flex-justify-start">
            <div class="p-5 border color-bg-subtle">box 1</div>
            <div class="p-5 border color-bg-subtle">box 2</div>
            <div class="p-5 border color-bg-subtle">box 3</div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 2: a continuación se muestran ejemplos que ilustran el Contenido de justificación de Flexbox de Primer CSS utilizando la clase flex-justify-end .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <h1 class="color-fg-success text-center">
            GeeksforGeeks
        </h1>
        <h4 class="text-center font-bold">
            Primer CSS Flex Direction
        </h4>
        <strong>Flexbox Container flex-justify-end Class:</strong>
        <br>
        <div class="border d-flex flex-justify-end">
            <div class="p-5 border color-bg-subtle">box 1</div>
            <div class="p-5 border color-bg-subtle">box 2</div>
            <div class="p-5 border color-bg-subtle">box 3</div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 3: a continuación se muestran ejemplos que ilustran el Contenido de justificación de Flexbox de Primer CSS utilizando la clase flex-justify-center .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <h1 class="color-fg-success text-center">
            GeeksforGeeks
        </h1>
        <h4 class="text-center font-bold">
            Primer CSS Flex Direction
        </h4>
        <strong>Flexbox Container flex-justify-center Class:</strong>
        <br>
        <div class="border d-flex flex-justify-center">
            <div class="p-5 border color-bg-subtle">box 1</div>
            <div class="p-5 border color-bg-subtle">box 2</div>
            <div class="p-5 border color-bg-subtle">box 3</div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 4: a continuación se muestran ejemplos que ilustran el Contenido de justificación de Flexbox de Primer CSS utilizando la clase flex-justify- between .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <h1 class="color-fg-success text-center">
            GeeksforGeeks
        </h1>
        <h4 class="text-center font-bold">
            Primer CSS Flex Direction
        </h4>
        <strong>Flexbox Container flex-justify-between Class:</strong>
        <br>
        <div class="border d-flex flex-justify-between">
            <div class="p-5 border color-bg-subtle">box 1</div>
            <div class="p-5 border color-bg-subtle">box 2</div>
            <div class="p-5 border color-bg-subtle">box 3</div>
        </div>
    </div>
</body>
</html>

Producción:

 

Ejemplo 5: a continuación se muestran ejemplos que ilustran el Contenido de justificación de Flexbox de Primer CSS utilizando la clase flex-justify-around .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
    <div class="o-container" style="padding:1em;">
        <h1 class="color-fg-success text-center">
            GeeksforGeeks
        </h1>
        <h4 class="text-center font-bold">
            Primer CSS Flex Direction
        </h4>
        <strong>Flexbox Container flex-justify-around Class:</strong>
        <br>
        <div class="border d-flex flex-justify-around">
            <div class="p-5 border color-bg-subtle">box 1</div>
            <div class="p-5 border color-bg-subtle">box 2</div>
            <div class="p-5 border color-bg-subtle">box 3</div>
        </div>
    </div>
</body>
</html>

Producción:

 

Referencia: https://primer.style/css/utilities/flexbox#justify-content

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *