即使我使用的是 flexbox，似乎也无法正确对齐容器答案

【问题标题】：Can't seem to get containers aligned properly even though I am using flexbox即使我使用的是 flexbox，似乎也无法正确对齐容器
【发布时间】：2022-01-26 12:02:22
【问题描述】：

import "./portfolio.scss"


export default function portfolio() {
    return (
        <div className="portfolio" id="portfolio">
            <h1>Portfolio</h1>
            <ul>
                <li className="active">Featured</li>
                <li>Web app</li>
                <li>Mobile app</li>
                <li>Design</li>
                <li>Branding</li>
            </ul>
            <div className="container">
                <div className="item">
                    <img
                    src="assets/default-product-image.png" 
                    alt="" />
                    <h3>Coming soon</h3> 
                </div>
                <div className="container">
                <div className="item">
                    <img
                    src="assets/default-product-image.png" 
                    alt=""/>
                    <h3>Coming soon</h3> 
                </div>
                <div className="container">
                <div className="item">
                    <img
                    src="assets/default-product-image.png" 
                    alt=""/>
                    <h3>Coming soon</h3> 
                </div>
                
        </div> 
        </div> 
        </div> 
        </div> 
    )
}

这是我的 .jsx，我正在制作带有容器的 div，并且容器似乎没有正确对齐，请参见下图。我试图让它们全部对齐，但第三个似乎已关闭，当我更改我查看它的设备时，它们彼此完美对齐。

这是我的scss

@import "../../global.scss";

.portfolio{
    background-color: lightblue;
    display: flex;
    flex-direction: column;
    align-items: center;

    h1{
        font-style: 500px;
    }

    ul{
        margin: 10px;
        padding: 0;
        list-style: none;
        display: flex;

        li{
            font-size: 14px;
            margin-right: 9px;
            padding: 7px;
            border-radius: 10px;
            cursor: pointer;

            &.active{
                background-color: $mainColor;
                color: white;
            }
        }

    }

    .container{
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        

        .item{
            width: 220px;
            height: 150px;
            border-radius: 20px;
            border: 1px solid rgb(240, 234, 234);
            margin: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
           position: relative;

            h3{
                position: absolute;
                font-style: 20px;
            }
            img{
                width: 100%;    
                height: 100%;
                object-fit: cover;
                z-index: 1;
            }

            &:hover{
                background-color: $mainColor;
                img{
                    opacity: 0;
                    z-index: 0;
                }
            }
        }
    }
}

这就是现在的样子，我希望项目均匀分布。

【问题讨论】：

我没有看过你的 CSS，但是 html 看起来很不正常。您正在嵌套像俄罗斯娃娃一样的容器，这不是故意的。修复你的缩进，问题应该看起来很清楚（查看所有</div>s）。

标签： css reactjs sass flexbox jsx

【解决方案1】：

<div class='container'>s 嵌套的方式可能是导致错位的原因。我在您的问题中没有看到任何图像，但我敢打赌您的代码正在生成容器，这些容器在树的下方越往下越小，这在小屏幕上被夸大了。

首先关闭您的容器 div，然后再打开另一个。此外，使用一致的缩进 - 这将有助于在您阅读代码时使这个问题更加明显。我已经清理了你的代码，除了 HTML 标记之外什么都没有改变。链接笔中的顶部示例已清理标记，而底部示例已分组容器。

https://codepen.io/the_Northway/pen/QWqapbg?editors=1100

.portfolio {
  background-color: lightblue;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portfolio#portfolio_fixed {
  background-color: orange;
}
.portfolio h1 {
  font-style: 500px;
}
.portfolio ul {
  margin: 10px;
  padding: 0;
  list-style: none;
  display: flex;
}
.portfolio ul li {
  font-size: 14px;
  margin-right: 9px;
  padding: 7px;
  border-radius: 10px;
  cursor: pointer;
}
.portfolio ul li.active {
  background-color: #445566;
  color: white;
}
.portfolio .container {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.portfolio .container .item {
  width: 220px;
  height: 150px;
  border-radius: 20px;
  border: 1px solid #f0eaea;
  margin: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}
.portfolio .container .item h3 {
  position: absolute;
  font-style: 20px;
}
.portfolio .container .item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}
.portfolio .container .item:hover {
  background-color: #445566;
}
.portfolio .container .item:hover img {
  opacity: 0;
  z-index: 0;
}

<div class="portfolio" id="portfolio_fixed">
    <h1>Portfolio</h1>
    <ul>
        <li class="active">Featured</li>
        <li>Web app</li>
        <li>Mobile app</li>
        <li>Design</li>
        <li>Branding</li>
    </ul>
    <div class="container">
        <div class="item">
            <img src="assets/default-product-image.png" alt="" />
            <h3>Coming soon</h3> 
        </div>
    </div>
    <div class="container">
        <div class="item">
            <img src="assets/default-product-image.png" alt=""/>
            <h3>Coming soon</h3> 
        </div>
    </div>
    <div class="container">
        <div class="item">
            <img src="assets/default-product-image.png" alt=""/>
            <h3>Coming soon</h3> 
        </div>
    </div>
</div> 
<div class="portfolio" id="portfolio_broken">
    <h1>Portfolio</h1>
    <ul>
        <li class="active">Featured</li>
        <li>Web app</li>
        <li>Mobile app</li>
        <li>Design</li>
        <li>Branding</li>
    </ul>
    <div class="container">
        <div class="item">
            <img src="assets/default-product-image.png" alt="" />
            <h3>Coming soon</h3> 
        </div>
        <div class="container">
            <div class="item">
                <img src="assets/default-product-image.png" alt=""/>
                <h3>Coming soon</h3> 
            </div>
            <div class="container">
                <div class="item">
                    <img src="assets/default-product-image.png" alt=""/>
                    <h3>Coming soon</h3> 
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：