HTML页面设计回温上节课内容123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>flex弹性布局</title> <style type="text/css"> .container { background-color: black; width: 660px; width: 300px; height: 400px; display: flex; /*属性0 display: -webkit-flex;*/ /*属性1:规定主轴方向,按行还是按列显示*/ /*flex-direction: row; flex-direction: column; flex-direction: column-reverse; flex-direction: row-reverse; flex-direction: row;*/ /*属性2:规定空间不够时,如何换行;*/ /*flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse;*/ /*属性3=1+2*/ /*flex-flow: row wrap;*/ /*属性4.定义了项目在主轴上的对齐方式*/ /*justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around;*/ /*属性5.定义项目在交叉轴上如何对齐 针对一行项目*/ /*align-items: flex-end; align-items: center; align-items: baseline;*/ /*基准线对齐,以内容文字对齐*/ /*align-items: stretch;*//*拉伸,把item注释才能看到效果*/ /*属性6.定义项目在交叉轴上如何对齐 针对多行项目*/ /*align-content: flex-start;/*item3不会被挤下去*/ /*align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around;*/ } .item { background-color: gold; width: 100px; height: 100px; margin: 10px; flex-grow: 1; /*属性8定义项目的放大比例,默认为0即如果存在剩余空间,也不放大*/ flex-shrink: 1; /*属性9定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小*/ } #item3{ line-height: 100px; /*属性7定义项目的排列顺序。数值越小,排列越靠前,默认为0*/ /*order: -1;*/ /*flex-grow: 2;*/ /*flex-shrink: 2;*/ /*属性10:理想宽高 ,优先级高于设定的宽高*/ /*flex-basis: 200px;*/ /*属性11:8+9+10*/ flex: auto; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item" id="item3">3</div> </div> </body></html>