一.设置弹性元素的增长因子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置弹性元素的增长因子</title> <link rel="stylesheet" href="1.css"> </head> <body> <h1>设置弹性元素的增长因子</h1> <h3>1.所用弹性元素不增长,以原始宽度显示,增长因子为0默认</h3> <div class="container flex demo1"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>2.将全部剩余空间分配给指定元素,例如第三个</h3> <div class="container flex demo2"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>3.将全部剩余空间按增长因子在不同弹性元素间分配</h3> <div class="container flex demo3"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>4.将全部剩余空间按增长因子在不同弹性元素间分配</h3> <div class="container flex demo4"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>5.每个元素宽度不同时,同样适用以上分配规律</h3> <div class="container flex demo5"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> </body> </html>
@import "public.css"; .container{ width: 550px; } .item{ width: 100px; } .demo1 > .item{ flex-grow: 0; } .demo2 > .item:first-of-type{ flex-grow: 0; } .demo2 > .item:nth-of-type(2){ flex-grow: 0; } .demo2 > .item:last-of-type{ flex-grow: 1; } /*****************/ .demo3 > .item:first-of-type{ flex-grow: 1; } .demo3> .item:nth-of-type(2){ flex-grow: 1; } .demo3 > .item:last-of-type{ flex-grow: 3; } .demo4 > .item:first-of-type{ flex-grow: 0.5; } .demo4> .item:nth-of-type(2){ flex-grow: 0.5; } .demo4 > .item:last-of-type{ flex-grow: 1.5; } .demo5 > .item:first-of-type{ width: 120px; flex-grow: 2; } .demo5 > .item:nth-of-type(2){ width: 150px; flex-grow: 2; } .demo5 > .item:last-of-type{ width: 180px; flex-grow: 6; }
二.设置弹性元素的缩减因子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置弹性元素的缩减因子</title> <link rel="stylesheet" href="2.css"> </head> <body> <h1>设置弹性元素的缩减因子</h1> <h3>1.所用弹性元素不增长,以原始宽度显示,</h3> <div class="container flex demo1"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>2.所有弹性元素自适应容器宽度且不换行,缩减因子:1 默认</h3> <div class="container flex demo2"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>3.当三个弹性元素的缩减因子不相等时</h3> <div class="container flex demo3"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>4.缩减因子也可以是小数,只要大于0就可以</h3> <div class="container flex demo4"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>5.每个元素宽度不同时,</h3> <div class="container flex demo5"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> </body> </html>
@import "public.css"; .container{ width: 550px; } .item{ width: 250px; } .demo1 > .item{ flex-shrink: 0; } .demo2 > .item{ flex-shrink: 1; } .demo3 > .item:first-of-type{ flex-shrink: 1; } .demo3 > .item:nth-of-type(2){ flex-shrink: 2; } .demo3 > .item:last-of-type{ flex-shrink: 3; } .demo4 > .item:first-of-type{ flex-shrink: 0.2; } .demo4 > .item:nth-of-type(2){ flex-shrink: 0.3; } .demo4 > .item:last-of-type{ flex-shrink: 0.5; } .demo5 > .item:first-of-type{ width: 220px; flex-shrink: 2; } .demo5 > .item:nth-of-type(2){ width: 250px; flex-shrink: 2; } .demo5 > .item:last-of-type{ width: 280px; flex-shrink: 6; }
三.设置弹性元素的基准尺寸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置弹性元素的基准尺寸</title> <link rel="stylesheet" href="3.css"> </head> <body> <h1>flex-basis:设置弹性元素的基准尺寸</h1> <h3>1:在设置弹性元素宽度时,一内容宽度显示</h3> <div class="container flex demo1"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>2.存在自定义元素宽度时,则以该宽度显示</h3> <div class="container flex demo2"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>3.自动状态下, 由浏览器根据预设值自行判定</h3> <div class="container flex demo3"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>4.当元素存在自定义宽度与基准宽度时, 以基准宽度为准 </h3> <div class="container flex demo4"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>5.元素基准宽度支持百分比设置 </h3> <div class="container flex demo5"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> </body> </html>
@import "public.css"; .container{ width: 550px; } .demo1 > .item{ flex-basis: content; } .demo2 > .item { width: 100px; } .demo3 > .item { flex-basis: auto; } .demo4 > .item { width: 100px; flex-basis: 150px; } .demo5 > :first-child { flex-basis: 20%; } .demo5 > :nth-child(2) { flex-basis: 30%; } .demo5 > :last-child { flex-basis: 50%; }
四.简化弹性元素的基本设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简化弹性元素的基本设置</title> <link rel="stylesheet" href="4.css"> </head> <body> <h1>flex:简化弹性元素的基本设置</h1> <h3>1.根据宽度计算,允许缩减适应容器</h3> <div class="container flex demo1"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>2.根据宽度计算,元素完全弹性以适应容器</h3> <div class="container flex demo2"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>3.元素完全失去弹性,以原石大小呈现</h3> <div class="container flex demo3"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>4.一个数值表示增长因子,flex:1</h3> <div class="container flex demo4"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>5.三个数值时,以它为计算标准</h3> <div class="container flex demo5"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> <h3>6.单独设置第一个元素弹性大小</h3> <div class="container flex demo6"> <span class="item">item1</span> <span class="item">item2</span> <span class="item">item3</span> </div> </body> </html>
@import "public.css"; .container{ width: 550px; } .demo1 > .item{ width: 100px; height: 60px; flex: initial; } .demo2 > .item{ width: 100px; height: 60px; flex: auto; } .demo3 > .item{ width: 100px; height: 60px; flex: none; } .demo4 > .item{ width: 100px; height: 60px; flex: 1; } .demo5 > .item{ width: 100px; height: 60px; flex: 1 0 200px; } .demo6 > .item{ width: 100px; height: 60px; } .demo6 > .item:first-of-type{ flex: 1 1 10%; }
五.align-self的用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>align-self的用法</title> <link rel="stylesheet" href="5.css"/> </head> <body> <div class="container flex "> <span class="item">flex-start</span> <span class="item">flex-end</span> <span class="item">center</span> <span class="item">baseline</span> <span class="item">stretch</span> </div> </body> </html>
.container{ border:2px dashed blue; margin:50px; background-color:#cdc; height:300px; width:565px; display:flex; -webkit-flex-flow:row wrap; -webkit-align-items:flex-start; align-items:flex-start; } .item{ width:100px; min-height:100px; border:1px solid green; margin:5px; font-size:20px; text-align:center; line-height:100px; color:#fff; font-weight:bold; } .item:nth-child(1){ background-color:lightblue; align-self:flex-start; } .item:nth-child(2){ background-color:black; align-self:flex-end; } .item:nth-child(3){ background-color:coral; align-self:center; } .item:nth-child(4){ background-color:yellow; align-self:baseline; } .item:nth-child(5){ background-color:lightpink; align-self:stretch; }
六.用flex实现圣杯布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用flex实现圣杯布局</title> <link rel="stylesheet" href="6.css"> </head> <body> <header>头部</header> <div class="main"> <div class="content">内容</div> <div class="left">左侧</div> <div class="right">右侧</div> </div> <footer>底部</footer> </body> </html>
body{ display:flex; flex-direction:column; } header,footer{ flex:0 0 50px; background:lightgreen; } .main{ display:flex; flex:1; } .content{ background:lightblue; height:500px; flex:1; } .left,.right{ height:500px; background:lightpink; flex:0 0 100px; } .left{ order:-1; }
七. flex属性的用法
①项目属性
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
②容器属性
1 flex-direction 主轴方向(即项目排列方向)
2 flex-wrap 当多个项目在一行排列不下时,如何换行
3 flex-flow flex-direction,flex-wrap的简写,默认:`row nowrap`
4 justify-content 项目在主轴上对齐方式
5 align-items 项目在交叉轴上的对齐方式
6 align-content 项目在多根轴线上的对齐方式,只有一根轴线无效