HTML基础14_弹性盒布局 弹性盒布局的含义 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性,旨在提供一个更 有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子 元素之间的空间。 弹性盒布局的作用 我们之前的传统布局, 依赖于盒模型, display, position, float, 但是我们以上的布局方式在解决布局 问题时, 多多少少会有一些不够优雅的地方, 比如: 元素的垂直居中, 而Flex(弹性布局) 是W3C推出的 一种全新的布局方式, 可以简便,快捷, 响应式的完成各种页面的布局效果. 目前, flex布局已兼容所有 浏览器。 弹性盒布局的适用场景 基本网格布局: 最简单的网格布局，就是平均分布。在容器里面平均分配空间，骰子布局很像，但 是需要设置项目的自动缩放。 百分比布局:某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。 圣杯布局: 圣杯布局(Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个 部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右 为：导航、主栏、副栏。

流式布局

悬挂式布局

弹性盒布局的具体用法 flex的基本概念: 容器 (flex container): 设置了display:flex或者inline-flex的元素 弹性子元素(flex item): 容器里的所有子元素 主轴(main axis)和侧轴(交叉轴)(cross axis) 这两个轴不真实存在。 主轴\"默认\"是水平的, \"默认\"方向从容器的左边(main start)延伸至容器的右边(main end)。 侧轴\"默认\"与主轴垂直, \"默认\"方向从容器的顶部(cross start)延伸至容器的底部(cross end)。

与弹性布局有关的样式 一. 容器有关的样式 将元素设置成容器: display:flex/inline-flex 设置主轴的方向: flex-direction row 默认值 水平方向, 从左至右。 row-reverse 水平方向, 从右至左。 column 垂直方向, 从上至下。 column-reverse 垂直方向, 从下至上。 弹性子元素的换行方式: flex-wrap nowrap 默认值, 不换行, 如果弹性子元素的总宽度超过容器的宽, 系统会强制压缩弹性子元素 的宽度以适应容器。 wrap 换行。 wrap-reverse 反向换行。

弹性子元素在主轴上的对齐方式: justify-content flex-start 主轴起点对齐。 flex-end 主轴终点对齐。 center 主轴居中。 space-around 所有元素沿主轴两个方向等距。 space-between 主轴方向两端元素靠边, 每个元素间隔等距。 单行弹性子元素在侧轴上的对齐方式: align-items flex-start 侧轴起点对齐。 flex-end 侧轴终点对齐。 center 侧轴居中。 stretch 默认值, 规定弹性子元素在侧轴方向上的高度, 默认填满整个侧轴, 该效果只在不设置 弹性子元素高度的情况下才会出现。 baseline 基线 对齐。

多行弹性子元素在侧轴上的对齐方式: align-content flex-start 侧轴起点对齐。 flex-end 侧轴终点对齐。 center 侧轴居中。 stretch 默认值, 规定弹性子元素在侧轴方向上的高度, 默认填满整行, 该效果只在不设置弹性 子元素高度的情况下才会出现。 space-between 侧轴方向两端元素靠边, 每个元素间隔等距。 space-around 所有元素沿侧轴两个方向等距。

二. 弹性子元素有关的样式 调整弹性子元素的排列顺序: order, 默认值都是0, 设置的值越小, 元素越向前排布. 如果值相同, 按 照默认的书写顺序排序。

align-self单独调整每个弹性子元素在侧轴上的对齐方式。 flex-start 侧轴起点对齐。 flex-end 侧轴终点对齐。 center 侧轴居中。 stretch 默认值, 规定弹性子元素在侧轴方向上的高度, 默认填满整个侧轴, 该效果只在不设置 弹性子元素高度的情况下才会出现。 baseline 基线 对齐。 弹性子元素多余空间的分配比例 flex-grow: 默认值是0(不分配), 可以填写不同的比例来让弹性子元 素分配多余的空间。

弹性子元素当空间不足时的收缩比例 flex-shrink: 默认值是1。 计算公式: 步骤1: 计算权重 (每个元素的原始宽度x每个元素的收缩比例)的和 步骤2: 计算溢出量 所有弹性子元素的宽度和 - 容器的宽度 步骤3: 计算具体的收缩值 元素的原始宽度x收缩比例÷权重x溢出 例子: div1: 原始宽度300px 收缩比例1 div2: 原始宽度220px 收缩比例1 div3: 原始宽度180px 收缩比例1 权重: 300*1+220*1+180*1 == 700 溢出量: 300+220+180-400 == 300 div1的收缩的值: 300*1/700*300 == 128.571 div2的收缩的值: 220*1/700*300 == 94.285 div3的收缩的值: 180*1/700*300 == 77.142 弹性子元素的理想尺寸 flex-basis 该样式可以理解为弹性子元素被放进容器之前的大小, 是我们假设或者理想的尺寸大小, 但是 并不一定是真实的大小, 弹性子元素最终的真实大小取决于容器。 弹性子元素的应用准则: content < width < flex-basis < (limted max | min-width)。 弹性子元素的宽度如果不设置, 默认由内容撑出或者由flex-grow的比例决定。 如果设置了width, 以width为准。 如果同时设置了width和flex-basis, 以flex-basis为准。 width与flex-basis的区别: flex-basis的优先级大于width。 flex-basis只对弹性子元素起作用, 普通元素没有效果。 当主轴是水平时, flex-basis作用的是元素的宽; 当主轴是垂直时, flex-basis作用的是元素的 高。 flex-basis对绝对定位的元素不起效果。 flex 是flex-grow, flex-shrink, flex-basis三者的合写形式 flex的默认值:0 1 auto(尺寸等于灵活的项目尺寸)。 flex:auto; 相当于 1 1 auto。 flex:none; 相当于 0 0 auto。 flex:1; 相当于 1 1 0%。

课堂总结 掌握弹性盒模型的基本概念及实现原理。 掌握弹性盒布局的主轴和交叉轴的关系。 掌握主轴对齐方式和交叉轴对齐方式。 掌握弹性盒子和弹性子元素的各种布局属性。