Understanding Flex

Varanasi Software Junction April 05, 2023

Flex

Flex or Flexbox is a CSS method of designing layouts in a HTML page.

To start with let us start with a basic design.

Here is the code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox 1</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: orange;
        height: 100px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 10px;
        background: teal;
      }
      section {
        display: flex;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>VSJ Flexbox</h1>
    </header>

    <section>
      <article>
        <h2>First</h2>

        <p>Content One</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Two.</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Three</p>
      </article>
    </section>
  </body>
</html>


The important code is highlighted.


section {
        display: flex;
      }

Added the row direction attribute.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox 2</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: orange;
        height: 100px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 10px;
        background: teal;
      }
      section {
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>VSJ Flexbox</h1>
    </header>

    <section>
      <article>
        <h2>First</h2>

        <p>Contact One</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Contact Two</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Contact Three</p>
      </article>
    </section>
  </body>
</html>

The relevant code

      section {
        display: flex;
        flex-direction: column;
      }





The possible values of flex-direction are
1. row. Default value
2. column
3. row-reverse
4. column-reverse

section {
        display: flex;
        flex-direction: row-reverse;
      }



section {
        display: flex;
        flex-direction: column-reverse;
      }

The wrap property causes vertical wrapping when no space is available.

Here is a page without wrap.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox 6</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: orange;
        height: 100px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 10px;
        background: teal;
      }
      section {
        display: flex;
        flex-direction: row;
       
      }
    </style>
  </head>
  <body>
    <header>
      <h1>VSJ Flexbox</h1>
    </header>

    <section>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
    </section>
  </body>
</html>





With flex-wrap

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox 6</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: orange;
        height: 100px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 10px;
        background: teal;
      }
      section {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
       
      }
    </style>
  </head>
  <body>
    <header>
      <h1>VSJ Flexbox</h1>
    </header>

    <section>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
    </section>
  </body>
</html>





<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox 6</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: orange;
        height: 100px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 10px;
        background: teal;
      }
      section {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
       
      }
    </style>
  </head>
  <body>
    <header>
      <h1>VSJ Flexbox</h1>
    </header>

    <section>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
      <article>
        <h2>First</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Second</h2>

        <p>Content Paragraph</p>
      </article>

      <article>
        <h2>Third</h2>

        <p>Content Paragraph</p>

        <p>Content Paragraph</p>
      </article>
    </section>
  </body>
</html>



The default property value is nowrap.


The flex property is used for setting the relative sizes.



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox 3</title>
    <style>
      .article1 {
        flex: 2;
      }
      .article2 {
        flex: 4;
      }
      .article3 {
        flex: 6;
      }
      html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: orange;
        height: 100px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 10px;
        background: teal;
      }
      section {
        display: flex;
        flex-direction: row;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>VSJ Flexbox</h1>
    </header>

    <section>
      <article class="article1">
        <h2>First</h2>

        <p>One</p>
      </article>

      <article class="article2">
        <h2>Second</h2>

        <p>Two</p>
      </article>

      <article class="article3">
        <h2>Third</h2>

        <p>Three</p>

        <p>Four</p>
      </article>
    </section>
  </body>
</html>

Change the direction to column

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox 3</title>
    <style>
      .article1 {
        flex: 2;
      }
      .article2 {
        flex: 4;
      }
      .article3 {
        flex: 6;
      }
      html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }

      header {
        background: orange;
        height: 100px;
      }

      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }

      article {
        padding: 10px;
        margin: 10px;
        background: teal;
      }
      section {
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>VSJ Flexbox</h1>
    </header>

    <section>
      <article class="article1">
        <h2>First</h2>

        <p>One</p>
      </article>

      <article class="article2">
        <h2>Second</h2>

        <p>Two</p>
      </article>

      <article class="article3">
        <h2>Third</h2>

        <p>Three</p>

        <p>Four</p>
      </article>
    </section>
  </body>
</html>



Tags:
Varanasi Software Junction

Posted by: Varanasi Software Junction

Varanasi Software Junction is the one stop for Software Training, Education and Development in Varanasi. We are available on location and online at your service.

Post a Comment

0 Comments