Flex-Box, flex-direction: row, column

Categories - CSS Tags - CSS   Maniruzzaman Akash   3 weeks ago   83   3 minutes   0

Flex-Box:

CSS Flexbox (Flexible Box Layout) is a layout model that allows you to design complex layouts more efficiently and easily than traditional models. Flexbox is particularly useful for distributing space along a single axis (row or column) and aligning items within a container. Here’s a basic example to get you started:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      /* Flex container properties */
      justify-content: space-between; /* Distribute items along the main axis */
      align-items: center; /* Align items along the cross axis */
      height: 200px; /* Set a fixed height for demonstration */
      background-color: #f0f0f0;
      padding: 20px;
    }

    .item {
      flex: 1; /* Flex-grow, flex-shrink, flex-basis in one shorthand */
      padding: 10px;
      border: 1px solid #ccc;
      margin: 5px;
    }
  </style>
  <title>Flexbox Example</title>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Output:

Screenshot-2023-11-11-215350

In this example:

  1. The container has display: flex;, making it a flex container.
  2. justify-content: space-between; distributes the items along the main axis with equal space between them.
  3. align-items: center; centers the items along the cross axis.
  4. Each item has flex: 1;, making them flexible and distribute remaining space equally.
  5. The padding, border, and margin properties are used for styling. Feel free to modify the code and experiment with different Flexbox properties to see how they affect the layout. Flexbox is powerful and can handle more complex layouts with additional properties like flex-direction, flex-wrap, and more.

The flex-direction property in CSS is used within a flex container to define the direction of the main axis. The main axis is the primary axis along which flex items are laid out. There are two main values for flex-direction: row and column.

flex-direction: row;

This value sets the main axis to be horizontal. Items are placed along the horizontal axis, and the cross axis is vertical.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flex-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border: 1px solid #ccc;
      padding: 10px;
    }

    .flex-item {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</body>
</html>

Output :

Screenshot-2023-11-11-220330 In this example, three flex items are arranged in a row with `flex-direction: row;`. The `justify-content: space-between;` property ensures that there is space between the items.

flex-direction: column;

This value sets the main axis to be vertical. Items are placed along the vertical axis, and the cross axis is horizontal.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flex-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #ccc;
      padding: 10px;
    }

    .flex-item {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</body>
</html>

Output :

Screenshot-2023-11-11-220502 In this example, three flex items are arranged in a column with `flex-direction: column;`. The `align-items: center;` property centers the items along the cross axis.
Previous
Responsive Anything - image, font, width, height
Next
flex-wrap: wrap, nowrap and flex-flow