《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 19.Flex布局

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1Flex布局体验02Flex布局原理03Flex父项常见属性04Flex子项常见属性目录contentsPART1Flex布局体验思考：以下效果如何实现？HTML结构：

<div

><span>1</span><span>2</span><span>3</span></div>体验flex布局divspan{height:100px;width:150px;background-color:skyblue;margin-right:5px;}div{width:50%;height:300px;background-color:pink;

display:flex;

justify-content:space-around;

align-items:center;}div{width:50%;height:300px;background-color:pink;

display:flex;}span:nth-child(2){margin:05px;}divspan{height:100px;

flex:1;background-color:skyblue;}不计算设置子项宽度，也可以平均分布体验flex布局PART2Flex布局原理Flex布局原理特点：任何一个容器都可以指定为flex布局当为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。flex是flexibleBox的缩写，意为"弹性布局"，又叫伸缩布局。原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。体验中div就是flex父容器体验中span就是子容器flex项目子容器可以横向排列也可以纵向排列我们可以通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。flexdirectionflexitemflexitemflexitemFlexcontainerFlex布局原理PART3Flex父项常见属性flex父项常见属性

属性说明flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行)align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap（1）主轴和侧轴在flex布局中，分为主轴和侧轴两个方向：默认主轴方向是X轴，水平向右默认侧轴方向是Y轴，垂直向下主轴水平向右侧轴垂直向下1.flex-direction设置主轴方向主轴和侧轴是会变化的，就用flex-direction设置主轴的方向，侧轴和他对应的90度方向。而子元素是沿着主轴来排列的。1.flex-direction设置主轴方向属性说明row从左到右（默认值）row-reverse从右到左column从上到下column-reverse从下到上flex-direction设置主轴方向rowrow-reversecolumncolumn-reverse2.justify-content设置主轴上的子元素排列方式justify-content属性定义了项目在主轴的对齐方式使用前一定要确认好主轴的方向值描述flex-start默认值，从行首起始位置开始排列flex-end从行尾位置开始排列center居中排列space-between两边贴边，再平均分配剩余空间space-evenly均匀排列每个元素，每个元素之间的间隔相等space-around均匀排列每个元素，每个元素两边分配相同的空间justify-content:flex-start;justify-content:flex-end;justify-content:center;justify-content:space-around;justify-content:space-between;默认X轴为主轴方向justify-content:space-evenly;该属性是控制子项在侧轴（默认是y轴）上的排列方式,在子项为单项（单行）的时候使用。3.align-items设置侧轴上的子元素排列方式（单行）值描述flex-start元素位于容器的开头flex-end元素位于容器的结尾center元素位于容器的中心stretch默认值，元素被拉伸以适应容器（拉伸时：子容器不要给高）baseline元素位于容器的基线上align-items:flex-start;align-items:flex-end;align-items:center;align-items:stretch;拉伸属性，子项没有设置高度时效果align-items:baseline;3.align-items设置侧轴上的子元素排列方式（单行）问题1：在flex布局中，一行的盒子显示较多，宽度不够，会换行显示吗？flex布局中默认是不换行的，项目都排在一条线（又称”轴线”）上，会缩小元素在一行显示。flex-wrap属性设置是否换行。值描述nowrap不换行（默认值）wrap换行，正向排列wrap-reverse换行，反向排列4.flex-wrap4.flex-wrapflex-wrap:wrap;flex-wrap:nowrap;flex-wrap:wrap-reverse;5.align-content设置侧轴上的子元素的排列方式（多行）设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。值描述flex-start从侧轴头部开始排列flex-end从侧轴的尾部开始排列center侧轴居中排列space-between两边贴边，再平均分配剩余空间space-evenly均匀排列每个元素

，每个元素之间的间隔相等space-around均匀排列每个元素，每个元素两边分配相同的空间stretch默认值，元素被拉伸以适应容器align-content:flex-end;align-content:flex-start;5.align-contentalign-content:center;align-content:space-around;align-content:space-between;align-content:stretch;5.align-content(拉伸子项没有高度时）align-content和align-items区别align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸align-content适应于换行（多行）的情况下（单行情况下无效）

可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值单行用align-items多行用align-content注意：学会区分单行和多行，有了换行才是多行哟6.flex-flow属性

*{box-sizing:border-box;}

div{width:600px;height:400px;background-color:pink;

display:flex;

flex-flow:columnwrap;}

divspan{width:25%;height:100px;background-color:skyblue;border:1pxsolid#666;}flex-flow属性是flex-direction和flex-wrap属性的复合属性即设置主轴方向和是否换行显示的连写，flex-flow:columnwrap;PART4Flex子项常见属性flex属性定义子项目分配剩余空间，用flex来表示占多少份数。.item{flex:<number>;/*默认值0*/}圣杯案例（两边固定，中间自适应）nav{width:80%;height:100px;

display:flex;margin:0auto;}a:nth-child(1){width:100px;height:100px;float:left;background-color:hotpink;}a:nth-child(2){

flex:1;background-color:pink;}a:nth-child(3){width:100px;height:100px;float:right;background-color:deeppink;}flex属性有了这个属性，平均分配子元素，子元素就可以不用指定宽度了三个span在div中分成三份,各占一份

*{box-sizing:border-box;}

div{width:60%;height:100px;

display:flex;margin:0auto;}

span{background-color:skyblue;height:100px;border:1pxsolid#ccc;

flex:1;}flex属性常见布局div{width:60%;height:200px;

display:flex;margin:100pxauto;border-radius:20px;overflow:hidden;}a{height:100%;

flex:1;

display:flex;flex-direction:column;/*主轴为Y轴*/}a:nth-child(2){margin:05px;}span{background-color:pink;

flex:1}span:nth-child(1){margin-bottom:5px;}<div><ahref="#"><span></span><span></span></a><ahref="#"><span></span><span></span></a><ahref="#"><span></