Flex interactive demo

<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
      body {
        background-color: #f6e8d6;
        font-family: Arial, sans-serif;
      }
      
      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: lightgoldenrodyellow;
      }
      
      .box {
        width: 200px;
        height: 200px;
        background-color: #ffd8b5;
        margin: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease-in-out;
      }
      
      .box:hover {
        transform: scale(1.1);
      }
      
      .form {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
      }

      label {
        font-weight: bold;
        margin-right: 10px;
      }

      select {
        padding: 5px;
        font-size: 16px;
        border-radius: 5px;
        border: none;
      }

      select:focus {
        outline: none;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Flexbox Demo</h1>
    </header>

    <div class="form">
      <label for="justify-content">Justify Content:</label>
      <select id="justify-content">
        <option value="center">Center</option>
        <option value="flex-start">Flex Start</option>
        <option value="flex-end">Flex End</option>
        <option value="space-between">Space Between</option>
        <option value="space-around">Space Around</option>
      </select>

      <label for="align-items">Align Items:</label>
      <select id="align-items">
        <option value="center">Center</option>
        <option value="flex-start">Flex Start</option>
        <option value="flex-end">Flex End</option>
        <option value="stretch">Stretch</option>
        <option value="baseline">Baseline</option>
      </select>
    </div>

    <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
    </div>

    <script>
      const justifyContentSelect = document.getElementById('justify-content');
      const alignItemsSelect = document.getElementById('align-items');
      const container = document.querySelector('.container');

      // Update justify-content value when select changes
      justifyContentSelect.addEventListener('change', () => {
        container.style.justifyContent = justifyContentSelect.value;
      });

      // Update align-items value when select changes
      alignItemsSelect.addEventListener('change', () => {
        container.style.alignItems = alignItemsSelect.value;
      });
    </script>
  </body>
</html>

In Flexbox, alignment refers to the positioning of items within a flex container along the cross-axis, which is perpendicular to the main axis. The cross-axis can be either the horizontal or vertical axis, depending on the direction of the main axis.

There are two main properties that control alignment in Flexbox: align-items and align-content. The align-items property controls how the items are aligned along the cross-axis within the flex container. The possible values for align-items include flex-start, flex-end, center, baseline, and stretch. The align-content property, on the other hand, controls how the rows of items are aligned within the flex container when there is extra space along the cross-axis. The possible values for align-content include flex-start, flex-end, center, space-between, space-around, and stretch.

By using these alignment properties, you can control the position and spacing of the items in a flex container, making it easy to create responsive and flexible layouts that adapt to different screen sizes and devices.

In Flexbox, the justify-content property is used to align and position items along the main axis within a flex container. Here are the different values that justify-content can take and what they do:

flex-start: This value aligns the items to the start of the main axis. This means that the items will be positioned at the beginning of the container and any extra space will be placed at the end of the container.

flex-end: This value aligns the items to the end of the main axis. This means that the items will be positioned at the end of the container and any extra space will be placed at the beginning of the container.

center: This value centers the items along the main axis. This means that the items will be positioned at the center of the container, with equal amounts of space on either side.

space-between: This value evenly distributes the items along the main axis. This means that the first item will be positioned at the start of the container, the last item will be positioned at the end of the container, and any extra space will be divided evenly between the remaining items.

space-around: This value evenly distributes the items along the main axis, but with space on either side of each item. This means that there will be space before the first item and after the last item, and each item will have equal space on either side.

space-evenly: This value evenly distributes the items along the main axis, with equal space on either side of each item. This means that the space before the first item and after the last item, as well as the space between each item, will be equal.

By using these different values of justify-content, you can control the position and spacing of items along the main axis of a flex container, making it easy to create flexible and responsive layouts.

In Flexbox, the align-items property is used to align and position items along the cross axis within a flex container. Here are the different values that align-items can take and what they do:

flex-start: This value aligns the items to the start of the cross axis. This means that the items will be positioned at the top of the container and any extra space will be placed at the bottom of the container.

flex-end: This value aligns the items to the end of the cross axis. This means that the items will be positioned at the bottom of the container and any extra space will be placed at the top of the container.

center: This value centers the items along the cross axis. This means that the items will be positioned at the center of the container, with equal amounts of space above and below.

baseline: This value aligns the items such that their baselines align. The baseline is the imaginary line on which the text sits. This means that the items will be aligned based on their text baseline, rather than their top or bottom edges.

stretch: This value stretches the items to fill the container along the cross axis. This means that the items will be stretched vertically to fill the height of the container.

By using these different values of align-items, you can control the position and alignment of items along the cross axis of a flex container, making it easy to create flexible and responsive layouts.

Samples

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flexbox Example</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      
      .box {
        width: 100px;
        height: 100px;
        background-color: #f4a261;
      }
    </style>
  </head>
  <body>
    <h1>justify-content: center;</h1>
    <h1>align-items: center;</h1>
    <div class="container">
      <div class="box"></div>
    </div>
    <p>Here, we are using the <code>justify-content: center;</code> property to horizontally center the item, and the <code>align-items: center;</code> property to vertically center the item within its container.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Example</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            max-width: 800px;
            margin-top: 50px;
        }
        .item {
            background-color: lightblue;
            border: 1px solid black;
            padding: 20px;
            margin: 10px;
            min-width: 200px;
            text-align: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Flexbox Example</h1>
    <p>Multiple items aligned using Flexbox</p>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        }

        .item {
            background-color: #4285f4;
            color: #fff;
            font-size: 20px;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
        }

        .item:nth-child(even) {
            background-color: #34a853;
        }

        .item:nth-child(3) {
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3 (flex-grow: 1)</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Align Items Baseline Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: baseline;
            height: 300px;
        }

        .box {
            background-color: #f1c40f;
            padding: 20px;
            margin: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Lorem ipsum</div>
        <div class="box">dolor sit amet</div>
        <div class="box">consectetur adipiscing elit</div>
        <div class="box">sed do eiusmod tempor incididunt</div>
    </div>
</body>
</html>