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

来源：互联网发布：jsp mysql 用户注册编辑：程序博客网时间：2024/05/17 07:14

目前刚参加工作不久，能力不足，经常会踩到一些简单的坑，记录下来，防止自己再重犯。
首先想写写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>

这里写图片描述
这里展示的正是浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。Flex布局让这变得很简单。

阅读全文

0 0