Question

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

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

问题是，右侧的固定宽度侧边栏与主要内容中的列表项之间没有相同的左侧间距（边距）。

<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容器。我也试着玩弄价值 - 空间和空间;但我仍然无法找到一种方法，可以在侧边栏和div之间使用＆＃34; itemlist＆＃34;的类给出相同的边距（间距）;适用于所有列出项目的＆＃34;项目＆＃34;。

以下是截图：https://copy.com/n1MfKWmAmFY2

Answer 1

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

它将使项目彼此均匀分隔，并将父容器的边缘均匀分隔。

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

注意：在侧边栏之前可能会显示您有更多空间，这是.sidebar {margin-left: 3.7%;}

添加的额外空间

类似地，两个连续项之间的空间比边缘之间的空间多出两倍。它的右侧和左侧空间都添加了两个项目。只有当您有多列项目时才能看到它。

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

1 个答案: