How to make a fixed width sidebar align with the flexible content using flexbox

StackOverflow https://stackoverflow.com//questions/25048503

Question

I am trying to style a layout using flexbox model. In my layout, I have a fixed width sidebar on the right, and a flexible width content on the left. The content on the left is a listing of items (basically a ul - li structure).

The content on the left (ul - li structure) is using the flexbox layout to make it flexible. So when I resize my browser window, the Listing items are evenly spaced, which is the desired behavior.

The problem is, The fixed width sidebar on the right does not have the same left spacing (margin), as between the listing items inside the main content.

Here is my code: 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>

I also tried to wrap my sidebar and the listing inside a wrapper div. And I made the whole wrapper a flexbox container. I also tried playing around with the values - space-between, and space-around; but still I couldn't figure out a way to give the same margin (spacing) between the sidebar and div with the class of "itemlist"; which is applied on all the listing items with a class of "item".

Here is a screenshot: https://copy.com/n1MfKWmAmFY2

Was it helpful?

Solution

try, .items{justify-content: space-around;}.

It will evenly space the items from each other and edge of parent container.

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

Note: it may appear you have more space before sidebar, thats extra space added by .sidebar {margin-left: 3.7%;}

similarly, the space between two consecutive items appears twice more than space between edge. its the right and left space both items added. Its only visible if you have more than one column of items.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top