Question 258040 in CSS Question posted in
Some basic documentation can be found here.

Css – Is there any difference between the align-items property value flex-start and start in flexbox layout?

<!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-direction: column;
            height: 200px;
            align-items: start; 
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        .flex-start-container {
            display: flex;
            flex-direction: column;
            height: 200px;
            align-items: flex-start; 
            border: 1px solid #ccc;
        }

        .item {
            width: 50px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid blue;
            margin: 5px;
        }
    </style>
    <title>align-items</title>
</head>
<body>
    <h2>align-items: start</h2>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h2>align-items: flex-start</h2>
    <div class="flex-start-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

Here is an example of what I did.
I tried changing flex-direction: column; and flex-direction: row; but can’t see any difference
I saw somewhere mentioned that start and flex-start are the same, but they are outdated. I don’t know if this is true.

Tags:

2

Answers


  1. 0

    The differences are explained well here, but you’re unlikely to notice any difference unless you’re doing advanced operations like reversing the flex direction or using a right-to-left language.

    Login or Signup to reply.
  2. 0

    If "flex-direction" is row-reverse then flex-start will be right of screen.

    But "start" always means current language direction’s start, for english being always left of screen, ignoring flex-direction.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search