CSS how to right align a div-CodePudding

I'm starting to learn web development from

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?

CodePudding user response：

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;
}

CodePudding user response：

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>

CodePudding user response：

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