Question

我正在尝试使用包装器将元素放置在屏幕的中间1240像素中，但是，当我添加包装器时， .space

当我缩小页面时，元素停止缩小，使我的“登录”按钮和“退出”按钮消失在页面右侧。我一直想知道是否在flex：中使用空的

：1是在前3个

元素与最后2个。

  .container {
    显示：flex;
}
.container> li {
    填充：10px;
    文本对齐：居中；
    字体大小：1em；
    白颜色;
    框大小：border-box；
    背景颜色：黑色；
    list-style-type：无；
}
。空间 {
    flex：1;
}
.wrapper {
    宽度：1240px；
    保证金：0自动;
    高度：100％;
}

Answer 1

您需要使用百分比使其响应。或者，如果您想维护max-width: 100%;

，请添加width: 1240px;

.container {
    display: flex;
}
.container>li {
    padding: 10px;
    text-align: center;
    font-size: 1em;
    color: white;
    box-sizing: border-box;
    background-color: black;
    list-style-type: none;
}
.space {
    flex: 1;
}
.wrapper {
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

<nav>
    <div class='wrapper'>
        <ul class="container">
            <li>Images</li>
            <li>Albums</li>
            <li>Tags</li>
            <li class='space'></li>
            <li>Log In</li>
            <li>Sign Up</li>
        </ul>
    </div>
</nav>

Answer 2

使用width: 100%;到nav和wrapper

.container {
    display: flex;
}
.container>li {
    padding: 10px;
    text-align: center;
    font-size: 1em;
    color: white;
    box-sizing: border-box;
    background-color: black;
    list-style-type: none;
}
.space {
    flex: 1;
}
.wrapper {
    width: 1240px;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
nav{    
width: 100%;
}

<nav>
    <div class='wrapper'>
        <ul class="container">
            <li>Images</li>
            <li>Albums</li>
            <li>Tags</li>
            <li class='space'></li>
            <li>Log In</li>
            <li>Sign Up</li>
        </ul>
    </div>
</nav>

如何将包装纸应用于此柔韧性盒并保持响应速度

2 个答案: