假设我正在构建一个简单的待办事项列表。下面是HTML代码和CSS代码:
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Lista de Coisas a Fazer</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom Style -->
<link href="https://fonts.googleapis.com/css?family=Oswald|Unna&display=swap" rel="stylesheet">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head><link rel="stylesheet" href="./style copia.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="intro col-12">
<h1>To-do List</h1>
</div>
</div>
</div>
<div class="row">
<div class="instrucoes">
<p id="first">- lorem ipsum;</p>
<p id="second">- lorme ipsum;</p>
<p id="third">- lorem ipsu;.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<input id="userInput" type="text" placeholder="New item..." maxlength="27">
<button id="enter"><i class="fas fa-pencil-alt"></i></button>
</div>
</div>
<div class="row">
<div class="listItems col-12">
<ul class="col-12 offset-0 col-sm-8 offset-sm-2">
</ul>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
下面是到目前为止的CSS脚本:
body, html {
background: rgb(200,218,211);
background: linear-gradient(0deg, rgba(200,218,211,1) 0%, rgba(242,246,245,1) 100%);
height: 100%;
width: 100%;
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.row {
justify-content: center;
}
我的问题是:为什么body和html的justify-content属性不自动应用于.row类？
如果删除“。row”类的justify-content，则只有第一个.row元素（待办事项列表h1)在中心对齐。据我所知，flex display的justify-content属性应该应用于flex-container的所有子元素（在本例中是body和html)。我说错了吗？为什么我必须为所有.row元素设置单独的justify-content属性？
justify-content应该应用于具有display:flex的容器；您的。row类试图告诉它的子类向中心对齐，但它不是一个flex容器。所以孩子们不听，一直站在左边。
null
body, html {
background: rgb(200,218,211);
background: linear-gradient(0deg, rgba(200,218,211,1) 0%, rgba(242,246,245,1) 100%);
height: 100%;
width: 100%;
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
}
.row {
display: flex;
justify-content: center;
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Lista de Coisas a Fazer</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom Style -->
<link href="https://fonts.googleapis.com/css?family=Oswald|Unna&display=swap" rel="stylesheet">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head><link rel="stylesheet" href="./style copia.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="intro col-12">
<h1>To-do List</h1>
</div>
</div>
</div>
<div class="row">
<div class="instrucoes">
<p id="first">- lorem ipsum;</p>
<p id="second">- lorme ipsum;</p>
<p id="third">- lorem ipsu;.</p>
</div>
</div>
<div class="row">
<div class="col-12 row">
<input id="userInput" type="text" placeholder="New item..." maxlength="27">
<button id="enter"><i class="fas fa-pencil-alt"></i></button>
</div>
</div>
<div class="row">
<div class="listItems col-12">
<ul class="col-12 offset-0 col-sm-8 offset-sm-2">
</ul>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>