任务3：“英博特智能科技”企业网站首页页面制作第二篇：项目实战篇3.4 公司优势制作1-2 任务2：页面制作-人物介绍内容呈现（1）熟练运用
弹性布局。（2）灵活运用CSS伪类。能力要求学习导览完成首页页面中公司优势模块的制作。1-2 任务2：页面制作-人物介绍内容呈现该
模块包含左中右三个部分，风格一致，实现过程包括搭建模块结构、三列布局设计以及图文样式的设计。1-2 任务2：页面制作-人物介绍内容
呈现（1）浏览器对弹性布局的支持情况与兼容问题是怎样的？
（2）
弹性布局在水平方向上的对齐方式“space-around”和“space-between”有何差别？
（
3）如何快速选择某个元素的第2个子元素？
1-2 任务2：页面制作-人物介绍内容呈现Flex是Flexi
ble Box的缩写，意为“弹性布局”，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。（1）Flex 容器通过display
: flex属性，可将元素声明块级弹性容器；通过dsplay: inline-fex，可将元素声明为行内弹性容器。Flex 容器包
含6个属性，分别为flex-direction、flex-wrap、flex-flow、justify-content、align
-items以及align-content。1-4 任务4：图文混排-人物介绍页面布局① flex-direction属性flex
-direction指定主轴(main cross)的方向，即元素排列的方向。flex-direction: row | row-
reverse | column | column-reverserow: 水平方向，从左往右row-reverse: 水平方向，
从右往左column: 垂直方向，从上往下column-reverse: 垂直方向，从下往上1-4 任务4：图文混排-人物介绍页面
布局② flex-wrap属性flex-wrap属性，指定弹性项目的换行方式，即弹性项目超过一行时如何换行。flex-wrap:
no-wrap | wrap | wrap-reverse?no-wrap: 不换行(默认)?wrap: 正常换行?wrap-re
verse: 换行，第一行在下方，从下往上换行1-4 任务4：图文混排-人物介绍页面布局③ flex-flow属性flex-flo
w属性，为flex-direction和flex-wrap的合并属性，其中第一个为flex-direction,第二个为flex-
wrap。flex-fow: 1-4 任务4：图文混排-人物介绍页面布局④
justify-content属性justify-content属性，指定弹性内容在主轴上的排列方式。justify-conte
nt: flex-start | flex-center | flex-end | space-between | space-a
round?flex-start: 从主轴起点(main start)到主轴终点(main end)?center: 居中?fle
x-end: 从主轴终点(main end)到主轴起点(main start)?space-between: 均匀分布在行里，第一
个元素边界与行起始位置边界对齐，最后一个元素边界与行结束位置的边界对齐?space-around: 均匀分布在行里，两端子元素与行
边界有间距1-4 任务4：图文混排-人物介绍页面布局⑤ align-items属性align-items属性，指定弹性项目在纵轴上
的对齐方向。align-items: flex-start | center | flex-end | base-line | s
tretch?flex-start: 项目对齐纵轴的起点(cross start)?center: 居中?flex-end: 项目
对齐纵轴的终点(cross end)?baseline: 基于基线对齐?stretch: 拉伸(默认)，从起点(cross sta
rt)到终点(croos end)1-4 任务4：图文混排-人物介绍页面布局⑥ align-content属性align-cont
ent属性，指定当主轴(main axis)随项目换行时，多条主轴线如何对齐。align-content: flex-start
| center | flex-end | space-between | space-around | stretch?flex
-start: 从纵轴起点(cross start)到终点(cross end)?center: 居中?flex-end: 从纵轴
终点(cross end)到纵轴起点(cross start)?space-between: 元素均匀分布在列里，第一个元素边界与
列起始位置边界对齐，最后一个元素边界与列结束位置的边界对齐?space-around: 元素均匀分布在列里，两端子元素与列边界有间
距?stretch: 拉伸(默认)，拉伸项目以布满纵轴长度1-4 任务4：图文混排-人物介绍页面布局（2）Flex 项目尽管弹性容
器已经有设置弹性项目的各种布局行为，但总有个别弹性项目需要自定义布局方式。Flex 项目包含6个属性，分别为order、flex-
grow、flex-shrink、flex-basis、flex以及align-self属性。①order属性，指定弹性项目的排列
序号，数值越小越靠前。 order: ②flex-grow属性，指定弹性项目在有空余空间的放大比例。默认为
0：表示即使有剩余空间也不放大。 flex-grow: ③flex-shrink属性，指定弹性项目在空间不够
时的缩小比例。默认为1：表示空间不够时项目将缩小。 flex-shrink: ④ flex-basis属性，
指定弹性项目的基本长度。 flex-basis: ⑤ flex属性，为flex-grow、flex-shri
nk和flex-basis的合并属性。 flex: flex-grow,flex-shrink,flex-basis
默认: 0,1,auto auto: 1,1,auto none: 0,0,auto1-4 任
务4：图文混排-人物介绍页面布局align-self属性align-self属性，指定弹性项目在纵轴上的对齐方式，将覆盖掉弹性容器
的align-items属性。align-self: auto flex-start | center | flex-end |
base-line | stretch?auto: 自动?flex-start: 项目对齐纵轴的起点(cross start)?c
enter: 居中?flex-end: 项目对齐纵轴的终点(cross end)?baseline: 基于基线对齐?stretch
: 拉伸(默认)，从起点(cross start)到终点(croos end)1-4 任务4：图文混排-人物介绍页面布局1-2 任务2：页面制作-人物介绍内容呈现具体要求见任务书运用所学知识，完成首页页面中公司优势模块的制作，截图上传讨论区。1-2 任务2：页面制作-人物介绍内容呈现1-2 任务2：页面制作-人物介绍内容呈现运用本课学习的技术，根据效果图完成公司优势模块制作（详见能力拓展）。非学无以广才，非志无以成学Web前端技术基础三国·诸葛亮《诫子书》 |
|
