Flex布局详细讲解

置顶 githubcurry

已于 2024-03-19 11:49:27 修改

阅读量2.2k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css html flex flex弹性布局

于 2020-11-28 11:00:32 首次发布

本文链接：https://blog.csdn.net/weixin_45277161/article/details/110261529

css 专栏收录该内容

28 篇文章

订阅专栏

学习了前端，我们要熟练地掌握网页基本布局，flex是一个很好用的布局方式。

拿layui来说，他们的这种布局方式就很实用，广泛地应用在后台网页布局。左边是可以折叠的菜单，上边是导航栏和面包屑导航，中间是内容主体

其中分为header头部
main内容部分，内容部分又分为左边的侧边栏和右边的内容区，左边和右边的都有滚动条在自己的内容区滚动。
footer底部声明栏（有的会有，有的没有）
大致的样子可以用这样的图片来概括：
做出来的效果图（网页布局）是这样式的：

布局思路是这样的：

首先给header和footer一个固定的高度，比如说4rem。
然后记得body的高度要设为100%，不然body是没有高度的。
body的布局设为flex，然后：

body {
    height: 100%;
    margin: 0rem;
    padding: 0rem;
    border: 0rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    text-align: center;
}

！！！这里着重说下，一些元素默认是有margin和padding的，所以一般在body里直接清除这些。

设置好了header和footer之后，我们就可以开始设计main部分的内容排列，因为body设置的排列是column，就是纵向排列，所以不能用align-items撑开main，只能在main里面设置flex: 1 1 auto 将元素撑大，而且aside和article是有滚动条的：所以在main里面要设置隐藏浮动，不然会将屏幕撑到很大（你的元素有多高，屏幕就会有多高，还会把header和footer清零）。：

main {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    flex: 1 1 auto;
    overflow: hidden;
}

aside {
    background: orange;
    width: 16rem;
    overflow: auto;
}

article {
    background: teal;
    flex: 1 1 auto;
    overflow: auto;
}

上面也可以看到main也是flex布局，所以aside和article成行排列，要使article撑满宽度，也要设置flex: 1 1 auto 。最后再完善每块里面的细节布局。

附上源码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子设置框架</title>
    <link rel="stylesheet" href="lichen.css">
</head>

<body>

    <header>

    </header>
    <main>
        <aside>
            <p>这里的文本内容是可以滚动的1，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的2，滚动条方向是垂直方向。</p>
        </aside>
        <article>
            <p>这里的文本内容是可以滚动的1，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            <p>这里的文本内容是可以滚动的2，滚动条方向是垂直方向。</p>
        </article>
    </main>

    <footer>

    </footer>

</body>

</html>

css

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0rem;
    padding: 0rem;
    border: 0rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    text-align: center;
}

header {
    width: 100%;
    height: 6rem;
    background: blue;
}

main {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    flex: 1 1 auto;
    overflow: hidden;
}

aside {
    background: orange;
    width: 16rem;
    overflow: auto;
}

article {
    background: teal;
    flex: 1 1 auto;
    overflow: auto;
}

footer {
    width: 100%;
    height: 6rem;
    background: red;
}