Flex 创造的利润不会消失答案

【问题标题】：Flex creates margin that won't go awayFlex 创造的利润不会消失
【发布时间】：2015-03-31 06:12:50
【问题描述】：

我使用display:flex 来使页面上的内容居中/垂直居中。我已经设置了一个媒体查询，以便有一个移动大小的汉堡菜单。但是，homePage 上似乎有一个右边距。无论我尝试什么，我都无法让利润消失。这是它的一个jsfiddle。请帮忙！

http://jsfiddle.net/crcommons/Lxepj9ko/2/ （p.s. 确保您调整浏览器大小，以便它在移动设备中使用）。

$('.hamburger').on('click', function() {
    $('.menu').slideToggle();
});

function setPageHeight () {
	var windowHeight = $(window).height();
	var headerHeight = $('header').height();
	pageHeight = (windowHeight - headerHeight);
	$('.homePage').css('min-height', pageHeight + 'px');
};

setPageHeight();

$(window).resize(setPageHeight);

*, *:after, *:before {
    box-sizing: border-box
}
body {
    font-size: 18px;
}
.container {
    margin: 0 auto;
}
nav {
    background-color: white;
    max-width: 100%;
    padding-top: .75em;
}
.mainNav {
    max-width: 1024px;
    margin: 0 auto;
}
.mainNav li {
    width: 19%;
    display: inline-block;
    border-right: 1px solid black;
    text-align: center;
}
.mainNav li:last-child {
    border-right: none;
}
.hamburger {
    display: none;
    line-height: .3em;
}
.hamburger:before {
    content: "≡";
}
.homePage {
    background-color: #CBD5D2;
    max-width: 100%;
    display: flex;
}
.introduction {
    max-width: 40em;
    margin: auto;
}

.logo {
    text-align: center;
}
.tagline {
    font-size: 3em;
    text-align: center;
}
.introduction p {
    text-align: justify;
}

@media screen and (max-width: 479px) {
    .wrapper {
        padding: 1.5em;
    }
    nav {
        display: none;
    }
    .hamburger {
        display: inline-block;
        font-size: 3.5em;
        text-decoration: none;
        float: right;
    }
    .navigation {
        float: left;
        float: left;
        position: absolute;
        right: 0;
        margin-top: 30px;
        padding: 0;
        background: gray;
    }
    .mainNav {
        padding: 0;
    }
    .mainNav li {
        display: block;
        padding: .5em;
        width: 100%;
    }
    .homePage {
        padding: 1em;
    }
    .tagline {
        font-size: 2em;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="container">
        <header>
            <div>
                <a href="#" class="hamburger"></a>
            </div>
            <nav class="navigation menu">
                <ul class="mainNav">
                    <li>Home</li>
                    <li>Page 1</li>
                    <li>Page 2</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
        <div class="homePage">
      
            <div class="introduction">
                <h1 class="logo">Title</h1>
                <h2 class="tagline">Lorem ipsum dolor sit.</h2>
                <p class="introP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nam velit, voluptates dolore consequuntur ea tempore laborum mollitia, corporis impedit distinctio aperiam itaque perspiciatis repellat neque facilis esse molestiae maiores eum, incidunt eius quaerat! Dicta illo ut, incidunt ratione magni cum unde architecto obcaecati illum harum tempora veniam placeat voluptatem.</p>
            </div>
            </div>
    </body>

【问题讨论】：

标签： css margin flexbox

【解决方案1】：

这是因为.hamburger 向右浮动，没有什么可以清除浮动。 .homepage 有一个 max-width: 100% 但未设置宽度。由于主页不是 100%，它会在汉堡包周围浮动。

清除浮动：

header::after {
    content: '';
    display: block;
    clear: both;
}

将主页宽度设置为 100%：

.homepage {
    background-color: #CBD5D2;
    max-width: 100%;
    width: 100%;
    display: flex;
}

【讨论】：

【解决方案2】：

解决此问题的一个选项是在.hamburger 类媒体查询设置position: absolute; right: 0px; 中

【讨论】：

非常感谢。这非常有效。你知道为什么 flex 会导致这种情况发生吗？