问题描述
我正在使用 flex 创建页面，因为我正在学习过程中
我希望父 banner 类中的内容位于具有 3 个子 class="quick-link" class="carousel slide" class="article"
当前，它们位于 div 的左侧
当我在内容中添加图像时，div 没有占据 div 的整个宽度。
可能是因为我给了图片一些宽度？
我已经将 d-flex 给了 HTML 结构中的主要父级，并尝试应用 justify-content: center; 以便父级中的所有子级都处于中间
谁能告诉我，我做错了什么？
HTML 代码：
<main>
<div class="main-container">
<!-- section 1 - Banner -->
<div class="banner d-flex">
<div class="quick-link">
<p>QUICKLINK</p>
<p>Fashion & Accessories</p>
<p>Spa & Massage</p>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/banner-mobile.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/banner-mobile.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/banner-mobile.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="article">
<div class="sony-tv banner-img">
<img src="images/free.png" alt="" style="width:40%;">
</div>
<div class="samsung banner-img">
<img src="images/free.png" alt="" style="width:40%;">
</div>
<div class="beat-phone banner-img">
<img src="images/free.png" alt="" style="width:40%;">
</div>
</div>
</div>
</div>
</main>
附上我如何获得输出的截图： enter image description here
解决方法
使用 display flex，有时宽度会根据内容起作用，因此请尝试使用宽度 100%。
CSS
.d-flex{
display: flex;
justify-content: center;
width: 100%;
}
您是否也介意分享您的 CSS 代码？这样我们就可以查看您的 CSS 的详细信息，并找出解决此问题的最佳方法。
根据给定的描述，我猜测“目前，它们位于 div 的左侧”的原因是您的主标签（或其他“外部 div”，例如 div class="main-container ") 宽度未设置为 100% 。此行为的目的是告诉您的主要成员占据其父级宽度的 100%。在这种情况下，主标签的父标签将是正文标签。
因为一旦您将 display:flex 属性应用于父项，该父项（现在为 flex box）内的项目将被设置为适合其自身的最小宽度，除非您将它们设置为特定值。
之后，你可以为你的三个div设置一个flex attribute（class="quick-link" class="carousel slide" class="article"），让浏览器知道三个div的宽度您想要展示的 div。
提示：您可以使用浏览器的内置检查器来检查元素的属性，这些属性将显示元素的占用宽度、高度等。对于 Firefox 和 Chrome，默认的热键是 Ctrl+Shift+C。
<style>
body{
margin:0;
}
main.widthFixed {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 10px;
}
p{
text-align: center;
}
.red {
background-color: #F00;
flex: 1;
}
.green {
background-color: #0f0;
flex: 2;
}
.blue {
background-color: #00f;
flex: 1;
}
main.widthNonFixed {
display: flex;
justify-content: center;
}
.widthNonFixed .red{
flex: none;
}
.widthNonFixed .green{
flex: none;
}
.widthNonFixed .blue{
flex: none;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Testing</title>
</head>
<body>
<main class="widthFixed">
<div class="red">
<p>I am flex: 1</p>
</div>
<div class="green">
<p>I am flex: 2</p>
</div>
<div class="blue">
<p>I am flex: 1</p>
</div>
</main>
<main class="widthNonFixed">
<div class="red">
<p>I am flex: none</p>
</div>
<div class="green">
<p>I am flex: none</p>
</div>
<div class="blue">
<p>I am flex: none</p>
</div>
</main>
</body>
</html>