1.设置弹性元素的增长因子
2.设置弹性元素的缩减因子
3.设置弹性元素的基准尺寸
4.简化弹性元素的基本设置
5.单独设置元素在交叉轴上排列方式
<body> <h2>单独设置元素在交叉轴上排列方式</h2> <div class="container flex"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div></body>
@import "public.css";.container { width: 500px; height: 300px; /*以主轴垂直为例进行演示*/ flex-flow: column nowrap; /*默认元素紧贴终止线排列*/ align-items: flex-end;}/*设置元素的默认大小*/.item { width: 100px; height: 60px;}
/*默认值: auto,表示继承父元素的align-items,如果没有父元素,则等价于stretch*//*最后一个调整, 紧贴起始线排列*/.item:last-of-type { align-self: flex-start;}/*第一个调整到中间位置排列*/.item:first-of-type { align-self: center;}/*第二个使它自动扩*/.item:nth-last-of-type(2) { background-color: #fff; /*为自动扩展,需还原元素宽度到初始大小*/ width: auto; align-self: stretch;}
/*order：弹性元素的排列顺序，默认为0，值越小越靠前排列*/.item:last-of-type { order:-1;}
6. 试着将之前的一些案例用flex布局改定, 例如圣杯布局
<head> <meta charset="UTF-8"> <title>圣杯布局：弹性盒子</title> <style> * { margin: 0; padding: 0; } body { height: 100vh; display: flex; /*!*垂直轴（交叉轴）方向，不换行*!*/ flex-flow: column nowrap; } header, footer { min-height: 60px; text-align: center; line-height: 60px; background-color: lightyellow; /*flex: none 不增长，不缩放，宽度auto，原尺寸*/ flex: 0 0 auto; } main { height: 90vh; background-color: lightgray; /*flex: auto; 1 1 auto 可增可缩,完全适应容器*/ flex: 1; display: flex; } article { box-sizing: border-box; background-color: lavender; flex:4 ; } aside:first-of-type { box-sizing: border-box; background-color: lightcyan; flex:1 ; order: -1; } aside:last-of-type { box-sizing: border-box; background-color: lightpink; flex:1 ; } </style></head><body> <header>头部</header> <main> <article>中间</article> <aside>左侧</aside> <aside>右侧</aside> </main> <footer>底部</footer></body>
7.总结：
- (1) . order : 定义项目排列顺序,索引越小超靠前,默认为0
- (2) . flex-grow: 定义项目的放大比例,默认0表示不放大, 即就算存在剩余空间也不放大
- (3) . flex-shrink: 定义了项目的缩小比例,默认为1,即空间不足时,自动缩小项目来填充
- (4) . flex-basis：定义了项目占据的主轴空间,默认值为auto, 即项目原始大小
- (5) . flex：是flex-grow,flex-shrink,flex-basis简写,默认值: 0 1 auto
- (6) . align-self：个性化定制某单个项目的对齐方式,可覆盖容器 align-items 属性, 默认auto
