谈谈关于Flex布局的一些简单问题

最新推荐文章于 2022-12-09 21:51:09 发布

Daniel_Yang_1125

最新推荐文章于 2022-12-09 21:51:09 发布

阅读量611

点赞数

CC 4.0 BY-SA版权

分类专栏： internship 文章标签： flex 布局

本文链接：https://blog.youkuaiyun.com/daniel_yang1125/article/details/77620653

internship 专栏收录该内容

3 篇文章

订阅专栏

本文深入解析Flex布局的基础概念和实际应用，包括弹性容器、弹性项目、轴等关键元素，并通过一个圣杯布局实例演示如何利用Flex布局优化页面在不同设备上的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前刚参加工作不久，能力不足，经常会踩到一些简单的坑，记录下来，防止自己再重犯。
首先想写写Flex布局（弹性布局），因为在项目中用得挺频繁的，对一些基本的概念和实践做个小结（主要是摘抄Mozilla的文档 : ）

Flex布局概念
对布局比较了解的同学可能会发现，块级布局更侧重于垂直方向，行内布局更侧重于水平方向，与此相对的，Flex布局是通过调整其内元素的宽高，实现自动填充的一种能力。Flex容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

来看张flex-direction为row的一个Flex容器：

其内的flex item将根据row的模式沿主轴水平排列，方向为元素的文本流方向。

弹性容器(Flex container)
包含着弹性项目的父元素。通过设置display属性值为flex或inline-flex即可定义弹性容器。

弹性项目(Flex item)
弹性容器的每个子元素都称为弹性项目。

轴(Axis)
每个弹性框布局包含两个轴。弹性项目依次排列的那根轴称为主轴(main axis)，同时垂直于主轴的那根轴称为侧轴(cross axis)。

flex-direction 确立主轴
justify-content 定义了在当前行上，弹性项目沿主轴如何排布
align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布
align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由align-items所确定的默认值

方向（Direction）
描述了弹性项目排布的起点与终点。
如order属性可将元素与序号关联起来，数值越小越靠前，依次决定哪些元素排在前面。

Tips：一些不会对Flex布局产生影响的属性：
由于Flex布局使用了不同的布局算法，某些属性在弹性容器上没有意义。

多栏布局模块的column-*属性对弹性项目无效
float与clear对弹性项目无效。使用float将使元素的display属性计为block
vertical-align对弹性项目的对齐无效

下面举一个经典的圣杯布局(HolyGrailLayout)来加深理解

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
        #main {
            min-height: 800px;
            margin: 0px;
            padding: 0px;
            display: flex;
            flex-direction: row;
        }
        #main > article {
            margin: 4px;
            padding: 5px;
            /* flex属性分别是flex-grow、flex-shrink以及flex-basis属性的简写 */
            flex: 3 1 60%; 
            order: 2;
        }
        #main > nav {
            margin: 4px;
            padding: 5px;
            flex: 1 6 20%;
            order: 1;
        }
        #main > aside {
            margin: 4px;
            padding: 5px;
            flex: 1 6 20%;
            order: 3;
        }
        header, footer {
            display: block;
            margin: 4px;
            padding: 5px;
            min-height: 100px;
        }
        /* 窄到已不足以支持三栏 */
        @media all and (max-width: 640px) {
            #main,#page {
                flex-direction: column;
            }
            #main > article, #main > nav, #main > aside {
            /* 恢复到文档内的自然顺序 */
            order: 0;
            }
            #main > nav, #main > aside, header, footer {
            min-height: 50px;
            max-height: 50px;
            }
        }
        </style>
    </head>
    <body>
        <header>header</header>
        <div id="main">
            <article>article</article>
            <nav>nav</nav>
            <aside>aside</aside>
        </div>
        <footer>footer</footer>
    </body>
</html>