Programming for beginners: Flex Line vs Flex Item

Flex Item

A flex item is an individual element within a flex container that is affected by the flex layout. These are the children of the flex container. : Flex items are the elements that you apply flex properties to and that participate in the flexbox layout. They are the actual content elements that flexbox manages and arranges.

Example

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

In the above HTML, <div class="item"> elements are flex items.

Flex Line

A flex line is a row or column of flex items that wraps onto a new line if there is not enough space in the current line. Flex lines are created when flex items are wrapped (using flex-wrap) and the container cannot fit all items in a single line.

When the flex container wraps items, each wrapped group of items forms a new flex line. Flex lines are what you control with properties like align-content to manage the spacing and alignment of multiple lines.

If you have a flex container with several items and flex-wrap: wrap, items will flow into multiple lines if needed. Each of these lines is a flex line.

align-items-vs-align-content.html

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox: align-items vs align-content</title>
  <style>
    .container {
      display: flex;
      height: 30vh;
      width: 30vw;
      border: 1px solid black;
      flex-wrap: wrap;
    }

    .item {
      height: 100px;
      width: 150px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 100px;
    }

    .align-items-center {
      align-items: center;
    }

    .align-content-center {
      align-content: center;
    }

  </style>
</head>
<body>
  <h1>Flexbox: align-items vs align-content</h1>

  <h2>align-items: center;</h2>

  <div class="container align-items-center">
    <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>

  <h2>align-content: center;</h2>
  
  <div class="container align-content-center">
    <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>

</body>
</html>

Previous Next Home

Programming for beginners

Monday, 10 February 2025

Flex Line vs Flex Item

No comments:

Post a Comment