forum

Home / DeveloperSection / Forums / How to Right-align flex item?

Ask Question
Sandra Emily

Sandra Emily

Follow
Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

06-Jun-2024

Right-align flex item

You can use the justify-content property with the value flex-end to align flex items to the right within a flex container on the flex container.

Example- 

.container {
 display: flex;
 justify-content: flex-end;
}

This CSS code will align flex items to the right within a flex container. You can apply the .container class to the parent element that contains the flex items you want to align to the right.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Right-align Flex Items</title>
  <style>
    /* css for align right the item */
    .container {
      display: flex;
      justify-content: flex-end;
      border: 1px solid #ccc;
      padding: 10px;
    }

    /* styling the flex item */
    .item {
      background-color: lightblue;
      padding: 10px;
      margin: 5px;
    }
  </style>
</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- 

answer 6518920606123502

 

Also, Read: How to align content of a div to the bottom?

MindStick Training

Liked By