CSS 如何右对齐 div

Question

我从 here 开始学习网络开发。目前，我正在研究下面显示的代码以更好地理解 flexbox。 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>

相关CSS代码：

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

网页如下所示：

我想知道如何在背景中右对齐或左对齐主要 div？哪个 style/command 用于此？

编辑：我知道如何对齐 div 中出现的较小方块。我想知道如何将容器背景中的蓝色大矩形向右或向左对齐。默认情况下它居中。如果之前的问题不清楚，我们深表歉意。

Answer 1

如果您希望您的部分中的元素右对齐，您应该添加：

align-items: flex-end;

您的部分 css 应该是这样的：

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

Answer 2

您现在已将左右边距定义为自动，因此它当前居中。可以设置margin-left: auto;为right-aligned，反之为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>

Answer 3

左对齐 align-items: flex-start; 和 align-items: flex-end; 右对齐。

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

CSS 如何右对齐 div

CSS how to right align a div

html

css

flexbox

frontend