html - 如何使用 flexbox 使固定宽度的侧边栏与灵活的内容对齐-6ren

html - 如何使用 flexbox 使固定宽度的侧边栏与灵活的内容对齐

转载作者：太空宇宙更新时间：2023-11-03 18:03:44

27

4

我正在尝试使用 flexbox 模型设计布局样式。在我的布局中，右侧有一个固定宽度的侧边栏，左侧有一个灵活宽度的内容。左边的内容是元素列表(基本上是一个 ul - li 结构)。

左边的内容(ul-li结构)使用了flexbox布局使其灵活。因此，当我调整浏览器窗口大小时，列表项的间距是均匀的，这是所需的行为。

问题是，右侧的固定宽度侧边栏与主要内容中的列表项之间的左侧间距(边距)不同。

这是我的代码:http://codepen.io/anon/pen/ymfDI

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .wrapper {
            padding: 0 15px;
            background: #ccc;
            min-width: 700px;
            max-width: 1890px;
            width: auto;
            height: auto;
            margin: 0 auto;
            position: relative;
        }

        .items {
            order: 1;

            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;

            -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;

            padding: 0;
            background: #aaa;

            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

        .item {
            height: 276px;
            width: 307px;
            margin: 10px;
            background: #555;
            border: 1px solid #dfdfdf;
            list-style-type: none;
        }

        .title {
            color: #333;
            text-transform: uppercase;
            font: normal 30px/50px Arial, Helvetica, sans-serif;
        }

        .sidebar {
            order: 0;

            display: block;
            padding: 0;
            margin: 0;
            background: #bbb;

            margin-left: 3.7%;

            -webkit-flex: 0 0 329px;
            -ms-flex: 0 0 329px;
            flex: 0 0 329px;
        }

        .sidebarContent {
            width: 307px;
            height: 900px;
            background: #5ab;
            margin: 10px;
            border: 1px solid #dfdfdf;
        }

        .wrapper {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;

            -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;

            padding: 0;
            background: #aaa;

            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <div class="itemlist">
        <h2 class="title">itemlist</h2>
        <ul class="items">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </div>
    <div class="sidebar">
        <div class="sidebarContent"></div>
    </div>
</div>
</body>
</html>

我还尝试将侧边栏和列表包装在包装器 div 中。我把整个包装器变成了一个 flexbox 容器。我还尝试使用值 - space-between 和 space-around；但我仍然想不出一种方法来在侧边栏和 div 之间使用“itemlist”类提供相同的边距(间距)；它适用于类别为“item”的所有列表项。

这是一个截图:https://copy.com/n1MfKWmAmFY2

最佳答案

尝试，.items{justify-content: space-around;}。

它会将元素彼此和父容器的边缘均匀地隔开。

http://codepen.io/chiranjeeb/pen/ouhFD

注意:侧边栏之前似乎有更多空间，这是 .sidebar {margin-left: 3.7%;}

添加的额外空间

类似地，两个连续元素之间的空间出现的空间比边缘之间的空间多两倍。它添加了两个元素的左右空间。它仅在您有不止一列的元素时可见。

关于html - 如何使用 flexbox 使固定宽度的侧边栏与灵活的内容对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25048503/

27

4

0

文章推荐： python - 如何创建 pygame 保存文件

文章推荐： mysql - 如何在 Mutex.synchronize 中获取局部变量值？

文章推荐： c# - C# 中是否有任何内置的编码枚举？

文章推荐： python - 显示从 Python 运行的 R 绘图

python - Tkinter 侧边栏
我想创建一个类似 ABOVE 的可折叠侧边栏。在折叠的表单中，侧边栏将只有选项图标，当您将鼠标悬停在栏上时，它会展开，向您显示图标的描述/名称。如果您单击该图标，它将带您进入该图标指定的功能，例如
右侧的 Swift 侧边栏
由于我需要在右侧打开侧边栏，如何将其从左侧更改为右侧？我使用的代码很简单: if revealViewController() != nil { Menubutton.target
整个高度的 CSS 侧边栏
我在使用高度标签时遇到了问题。我想制作一个背景延伸到页面底部的侧边栏。我已将高度设置为 100%，但这并不像我想象的那样有效。这是我的侧边栏代码。 #side{ box-sizing:b
javascript - 侧边栏 - 关闭和打开过滤器列表
我正在为我的网站构建一个过滤器侧边栏，我希望能够通过按 btn 打开和关闭过滤器列表。 jQuery('.parent > .children').parent().click(function()
css - Bootstrap 侧边栏
我将如何使 CONTENT HERE 文本进入红色框区域。我几乎尝试了所有我能想到的方法，但没有任何效果。我什至尝试将文本排成一行，然后将其类设置为“行向左拉”。这是我的代码:
控制好你的 Wordpress 侧边栏
当然 Wordpress 2.7 里有“小工具”选项也能控制 Widget ，但是反复实验后发现样式无法统一，可控性较低。个人认为是比较鸡肋的功能，这里就不谈了。进入正题。侧边栏
qt - 应用程序查看器设置全屏功能不隐藏 ubuntu 侧边栏
我正在为使用 Qt 和 QML for Ubuntu Linux 的应用程序构建 UI。我有一个带有 Canvas 元素的查看器窗口，默认情况下应该是全屏的。打开应用程序时效果很好(即隐藏了 Ubun
css - 小屏幕时在正文后显示 float 侧边栏
我有一个两列布局。左侧是正文，右侧是侧边栏 ( float: right; width: 30% )。在小型浏览器上，我想先显示正文，然后是侧边栏。但是如果我删除 float从带有媒体查询的侧边栏中
reactjs - 单击任何链接时如何关闭 react 侧边栏？
我是 React 的新手，试图让这个组件工作:https://github.com/balloob/react-sidebar 它有效，除了在跟随链接时侧边栏不会关闭。如何单击侧边栏链接关闭侧边栏？
sublimetext2 - 右侧的 Sublime 侧边栏
我开始使用 Sublime Text 2。但是有一个小问题，找不到将侧栏(文件夹平移)移动到窗口右侧的选项。你能告诉我我该怎么做吗？是否有任何插件或设置选项。最佳答案遗憾的是，不支持此功能。看
r - 侧边栏 Shiny 太长怎么办？
在下面的玩具示例中，我在侧边栏中有很多 slider 。对于最后一个，我再也看不到正确的情节了。这个问题有什么不涉及删除 slider 的解决方案吗？ # 01-kmeans-app palette(
macos - 将项目添加到 Finder 侧边栏
我想向 Finder 侧边栏添加一个新项目。我发现 Finder 将“地点”列表保存在 `~/Library/Preferences/com.apple.sidebarlists.plist 中。我能
javascript - 固定 float 侧边栏
我正在寻找创建一个固定侧边栏，与苹果的(就功能而言)非常相似。当您在他们的商店中配置您的 Mac 时，当您向下滚动页面时，右侧的购物篮会固定位置；完美。 position:fixed 是相对于视口(
ios - 创建 SwiftUI 侧边栏
我想使用 SwiftUI 构建一个非常简单的 iOS 14 侧边栏。设置很简单，我有三个 View HomeView , LibraryView和 SettingsView和一个代表每个屏幕的枚举。
javascript - 带有固定顶部菜单的语义 UI 侧边栏
Semantic-UI 预先警告其 sidebar page “当侧边栏出现时，固定位置内容可能无法更改其位置。”然后它提供了两种可能的解决方案。令人惊讶的是，在同一个页面和整个网站上，Semant
reactjs - React Pro 侧边栏
有人用过 React Pro 侧边栏吗？有人可以告诉我如何使用 sass 侧边栏组件以及如何增加侧边栏的长度。是否还有其他库提供了如何使用其侧边栏的示例。这是 React Pro 侧边栏示例。
reactjs - React Pro 侧边栏
有人用过 React Pro 侧边栏吗？有人可以告诉我如何使用 sass 侧边栏组件以及如何增加侧边栏的长度。是否还有其他库提供了如何使用其侧边栏的示例。这是 React Pro 侧边栏示例。
javascript - 带有反应路由器的 react 侧边栏
我是 React 的新手，一直在尝试寻找一个示例，说明如何在 reactjs 中创建侧边导航栏并将 reactrouter 与它一起使用。现在，我有一个如下所示的“侧边导航” Pane : impor
javascript - 将按钮附加到语义 ui 侧边栏
我正在尝试制作一个像 semantic-ui.com 上那样的简单侧边栏，只是我希望它位于右侧。看起来很简单，除了让按钮附加是我最大的问题。你可以在 jsfiddle 看到它，有点工作......HT
CSS:侧边栏 div 不会留在原地!
我附上了我的 HTML 和 CSS，希望有人能帮助我。基本上我有一个右侧边栏 div，其中的内容不会推到顶部。当我尝试使用位置和高度属性时，内容只是漂浮在整个页面上，甚至不会停留在右侧边栏中。我希望有

首页

博学

6Ren·AI

商城

html - 如何使用 flexbox 使固定宽度的侧边栏与灵活的内容对齐