gpt4 book ai didi

css - 如何使用 flex direction 将元素直接对齐?

转载 作者:行者123 更新时间:2023-12-05 03:22:19 25 4
gpt4 key购买 nike

正如您在下面的代码片段中看到的那样,当网页大小达到 776px 时,它会变成像对齐的列,但不会直接相互对齐。我已经添加了 align-items 属性,如何直接将元素彼此对齐?

.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}

@media screen and (max-width:776px) {
.banner-content-container {
align-items:center;
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>

</html>

最佳答案

在这种情况下,您可以使用 align-text 属性:

.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}

@media screen and (max-width:776px) {
.banner-content-container {
text-align: center; /* changed this line */
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>

</html>

或者如果您希望它们居中但在左侧对齐,您可以将容器的宽度设置为 fit-content,然后通过设置 margin: 0 auto; 使整个容器居中; :

.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}

@media screen and (max-width:776px) {
.banner-content-container {
width: fit-content;
margin: 0 auto;
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>

</html>

关于css - 如何使用 flex direction 将元素直接对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72726572/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com