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

【问题标题】：How to make a fixed width sidebar align with the flexible content using flexbox如何使用 flexbox 使固定宽度的侧边栏与灵活的内容对齐
【发布时间】：2014-09-22 18:49:33
【问题描述】：

我正在尝试使用 flexbox 模型设置布局样式。在我的布局中，右侧有一个固定宽度的侧边栏，左侧有一个灵活宽度的内容。左边的内容是item的列表（基本上是一个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

【问题讨论】：

标签： html css alignment sidebar flexbox

【解决方案1】：

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

它将项目彼此和父容器边缘均匀地隔开。

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

注意：看起来你在侧边栏之前有更多空间，这是.sidebar {margin-left: 3.7%;}添加的额外空间

类似地，两个连续项目之间的间距是边缘间距的两倍。它的左右空间都添加了。它仅在您拥有多于一列的项目时才可见。

【讨论】：