'CSS how to right align a div

I'm starting to learn web development from here. Currently, I am working fidgeting around with the code shown below to understand flexbox better. HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Playground</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <h1>Let's Play With Flexbox</h1>

    <section id="container">
        <div style="background-color: #80ffdb"></div>
        <div style="background-color: #64dfdf"></div>
        <div style="background-color: #48bfe3"></div>
        <div style="background-color: #5390d9"></div>
        <div style="background-color: #6930c3"></div>
    </section>

</body>

</html>

Relevant CSS code:

body {
    font-family: 'Open Sans', sans-serif;}
h1 {
    text-align: center;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    flex-wrap:wrap;
}

#container div{
    height:200px;
    width: 200px;
}

The webpage looks like this: enter image description here

I want to know how do I right or left align the main div in the background? Which style/command does one use for this?

EDIT: I know how to align the smaller squares present inside the div. I want to know how do I align the big blue-ish rectangle in the background of the containers to the right or the left. By default its centered. Apologies if that was not clear in the question before.

htmlcssflexboxfrontend


Solution 1:[1]

You have left and right margin defined at auto right now so it's currently centered. You can set margin-left: auto; for it to be right-aligned, and do the opposite for it to be left-aligned.

body {
    font-family: 'Open Sans', sans-serif;}
h1 {
    text-align: center;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin-left: auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    flex-wrap:wrap;
}

#container div{
    height:200px;
    width: 200px;
}

body {
  margin: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Playground</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <h1>Let's Play With Flexbox</h1>

    <section id="container">
        <div style="background-color: #80ffdb"></div>
        <div style="background-color: #64dfdf"></div>
        <div style="background-color: #48bfe3"></div>
        <div style="background-color: #5390d9"></div>
        <div style="background-color: #6930c3"></div>
    </section>

</body>

</html>

Solution 2:[2]

For left align align-items: flex-start; and align-items: flex-end; for right align.

body {
  font-family: 'Open Sans', sans-serif;
}
h1 {
  text-align: center;
}

#container {
  background-color: #003049;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  display: flex;
  flex-direction: column;

  /*right align*/
  align-items: flex-end;

  /*left align*/
  /* align-items: flex-start; */

  /* justify-content: flex-end; */
  flex-wrap: wrap;
}

#container div {
  height: 200px;
  width: 200px;
}

Right align

Solution 3:[3]

if you want that the elements in your section get aligned to the right you should add :

align-items: flex-end;

your section css should be like so :

#container {
  background-color: #003049;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-wrap:wrap;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kameron
Solution 2 Ethan
Solution 3 Ethan

Related Questions