做一个京东网站怎么做,wordpress极简,工程承包信息,项城网站设计当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第一章 层叠、优先级与继承#xff08;已完结#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位#xff08;已完结#xff09; 2.1 相对… 当前内容所在位置可进入专栏查看其他译好的章节内容 第一章 层叠、优先级与继承已完结 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位已完结 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型已完结 3.1 常规文档流3.2 盒模型3.3 元素的高度3.4 负的外边距3.5 外边距折叠3.6 容器内的元素间距问题3.7 本章小结 第四章 Flexbox 布局 4.1 Flexbox 布局原理已完结 4.1.1 创建一个基础的 Flexbox 菜单4.1.2 添加内边距与间隔 4.2 弹性子元素的大小 ✔️ 4.2.1 使用 flex-basis 属性 ✔️4.2.2 使用 flex-grow 属性 ✔️4.2.3 使用 flex-shrink 属性 ✔️4.2.4 实际应用 ✔️ 4.3 弹性布局的方向精译中 ⏳ 文章目录 4.2 弹性子元素的大小4.2.1 使用 flex-basis 属性4.2.2 使用 flex-grow 属性4.2.3 使用 flex-shrink 属性4.2.4 实际应用 4.2 弹性子元素的大小
弹性子元素的尺寸大小固然可以用熟悉的 width 和 height 属性来指定但 Flexbox 布局提供了更丰富的选择。本节就来重点考察其中之一flex 属性。
flex 属性控制的是沿主轴方向通常为宽度上的弹性子元素大小。如代码清单 4.6 所示先在页面主区域应用 Flexbox 布局再通过 flex 属性设置各列的尺寸。样式更新后的主区域效果如图 4.7 所示。 图 4.7 应用了弹性布局的白色主区域效果图
根据代码清单 4.6 更新本地样式表。该样式通过 tile 类设置白色背景然后用 flex 类指定 main 元素为弹性容器。
代码清单 4.6 在主容器上应用 Flexbox 布局
.tile {/* 给三个板块加上白色背景和内边距 */padding: 1.5em;background-color: #fff;
}.flex {/* 在主容器上应用 flexbox 布局并设置间隙 */display: flex;gap: var(--gap-size);
}这样页面内容就分为了两列左边的大块区域column-main为页面正文区右边一栏则是登录表单和一个较小的报价区column-sidebar。但此时还没有指定列宽因此宽度是随内容本身自行调整的。如图 4.7 所示两列内容未能完全填满可用空间当然对小窗口而言或许没问题。
弹性子元素上的 flex 属性包含了好几个配置项。先通过一个最基本的案例来熟悉它。用 column-main 和 column-sidebar 类来定位两列再通过 flex 分别指定 ⅔ 和 ⅓ 的列宽
代码清单 4.7 使用 flex 属性设置列宽
.column-main {flex: 2;
}
.column-sidebar {flex: 1;
}这样两列的宽度就扩展开来二者之和与 nav 导航条的宽度相等并保持正文列的宽度是侧边栏的两倍。Flexbox 贴心地完成了所有数学计算。下面具体考察一下这一计算过程。
flex 属性其实是三个尺寸属性 flex-grow、flex-shrink 和 flex-basis 的简写形式。上面的样式相当于只设置了 flex-grow其余两个属性则取默认值分别为 1 和 0%。因此 flex: 2 等效于 flex: 2 1 0%。通常首选简写形式但也可以像这样分开声明
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;下面就来分别学习这三个属性。先从 flex-basis 开始因为它是其余两个属性的基础。
4.2.1 使用 flex-basis 属性
flex-basis 定义了元素大小的基准值即一个初始的“主尺寸”。flex-basis 属性可以设置为任意合法的 width 属性值如 px、em 及百分比其初始值initial value为 auto此时如果浏览器发现元素指定了 width 属性则该 width 值即为 flex-basis 的值否则根据元素内容确定大小。如果 flex-basis 的值不为 auto其 width 属性值也将被忽略。如图 4.8 所示。 图 4.8 三个弹性子元素的 flex-basis 均为 20%各占初始主尺寸宽度的 20%
初始主尺寸全部确定后这些弹性子元素可能还需要沿主轴方向适度伸缩以适应或填充弹性容器的大小。此时就需要 flex-grow 和 flex-shrink 这两个属性做进一步控制。
4.2.2 使用 flex-grow 属性
子元素的 flex-basis 全部确定后连同子元素间的所有间隙与外边距加起来的总宽度未必刚好等于弹性容器的宽度很可能会留白如图 4.8 所示。
这部分留白或剩余宽度会根据 flex-grow 的值按比例分配给每个弹性子元素。flex-grow 的值为非负整数。当值为 0 时表示该弹性子元素的宽度最多延展到 flex-basis 的大小而当值大于 0 时则表示该元素将按比例延展直至填满整个弹性容器如图 4.9 所示。 图 4.9 带有 flex-grow 值的子元素将按比例延展直到填满整个弹性容器
flex-grow 的值越大该元素的“权重”越高占据的剩余宽度也就越多。如图 4.10 所示flex-grow: 2 的子元素延展量是 flex-grow: 1 的子元素的两倍。 图 4.10 flex-grow 值越大子元素延展时分得的剩余可用宽度的比重就越高
回到本节开头那个示例。简写声明 flex: 2 与 flex: 1 对应的 flex-basis 均为 0%因此用整个容器的宽减去两列间的间隙 1.5em就得到了总剩余宽度的大小。剩余宽度再按比例分配给这两列总量的 ⅔ 分给第一列剩下的 ⅓ 分给第二列如图 4.11 所示。 图 4.11 两个内容列完全填充弹性容器宽度后的效果图
推荐使用简写属性 flex而不是单独声明 flex-grow。flex 属性与大多数简写属性不同其省略的样式值不会被设为对应的初始值initial value相反简写形式会默认给它们赋上有用的值flex-grow 为 1flex-shrink 也为 1而 flex-basis 默认取 0%。在大多数情况下这些值都是满足需要的。
4.2.3 使用 flex-shrink 属性
flex-shrink 属性与 flex-grow 遵循相似的原则。初始主尺寸确定后累加后的总宽度可能会超出弹性容器的可用宽度。如果不设置 flex-shrink内容就会溢出如图 4.12 所示。 图 4.12 弹性子元素总的初始宽度可能超出弹性容器
各子元素上的 flex-shrink 值表示该元素是否应该收缩尺寸以防溢出容器。若值为 0则不收缩若值大于 0则对应元素将一直收缩直到总尺寸不再溢出。flex-shrink 的值所占比重越高其子元素收缩的幅度相应就越大由于收缩时初始主尺寸也算在内因此尺寸大的元素会比尺寸小的收缩得更多。
作为备选方案也可以在示例页中通过 flex-shrink 来实现类似的两列布局效果。先将两个内容列的 flex-basis 设为想要的比例即 66.67% 和 33.33%这样二者的总宽度加上 1.5em 的间隙总量将比容器多出 1.5em。再将两列的 flex-shrink 分别设为 1这样每一列就会收缩相同的宽度以避免溢出容器。所需样式如代码清单 4.8 所示。
代码清单 4.8 使用 flex 属性设置宽度
.column-main {flex: 66.67%; /* 等效于 flex: 1 1 66.67% */
}
.column-sidebar {flex: 33.33%; /* 等效于 flex: 1 1 33.33% */
}该解决方案与前面即代码清单 4.7给出的方案可谓殊途同归都能满足页面布局的需要。 注意 如果深究细节代码清单 4.7 和 4.8 之间还是存在细微差别的。具体原因有点复杂但简单来讲是因为 column-main 列设置了内边距 padding而 column-sidebar 列则没有。当 flex-basis 为 0% 时内边距会改变弹性子元素初始主尺寸的计算方式。因此代码清单 4.7 中的正文列 column-main 会比 4.8 中的略宽一些。如果对测量精度有要求网格布局不失为一种更好的解决方案详见第 5 章。 4.2.4 实际应用
flex 属性的用法有很多可以像前面的网页那样用 flex-grow 值或者 flex-basis 百分比来定义每列的占比也可以定义一组宽度固定的列外加可以随视口动态缩放的“流体”列“fluid” columns还可以效仿 Bootstrap 那样的第三方库通过构建出一套“网格系统”提供一系列可复用的样式类来定义具有不同预设尺寸的布局列。图 4.13 给出了 Flexbox 可以实现的几种布局效果。 图 4.13 用 flex 属性定义元素尺寸的几种方式
第三个示例展示的是曾经的“圣杯”布局“Holy Grail” layout—— 一个在过去用 CSS 实现起来异常困难的布局效果。该布局中两个侧边栏的宽度是固定的而中间那一栏则是“流动的”“fluid”即要求自动填满可用空间。最要命的是这三列的高度还要完全相等而高度又是其内容决定的。现在人们只要利用不同的弹性子元素略加想像就能组合出各式各样的解决方案轻松实现这样的效果。
