实例演示flex容器和项目属性设置
16lz
2021-07-15
这次我们用实例来演示下flex的基本功能，基本概念不容易理解，以下为实例和注释，有什么问题多多交流。
实例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>实例演示flex容器和项目属性设置</title></head><body><style>/*首先对flex容器属性设置，就是所有的项目包含在flex容器内*/.box{display:flex;/*主轴方向和排列顺序第一个值有四个值：row行从左到右,row-reverse行从右到左,column列从上到下,column-reverse列从下到上第二个值有三个可选值：nowrap默认值单行,wrap多行,wrap-reverse和wrap的行为一样，但是cross-start和cross-end互换*/flex-flow:columnwrap;/*项目在主轴上的对齐方式flex-start,flex-end,center,space-between,space-around*/justify-content:center;/*项目在交叉轴上的对齐方式flex-start,flex-end,center,space-between,space-around,stretch*/align-content:center;/*项目在多行容器中的对齐方式flex-start,flex-end,center,baseline,stretch*/align-items:center;}.boxdiv.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8,.item9,.item10{order:1;flex:01auto;/*单个项目在交叉轴上的对齐方式auto,flex-start,flex-end,center,baseline,stretch,另外可以单独对每个项目进行align-self设置*/align-self:auto;min-width:0;min-height:auto;border:1pxsolidred;}</style><divclass="box"><divclass="item1">item1</div><divclass="item2">item2</div><divclass="item3">item3</div><divclass="item4">item4</div><divclass="item5">item5</div><divclass="item6">item6</div><divclass="item7">item7</div><divclass="item8">item8</div><divclass="item9">item9</div><divclass="item10">item10</div></div></body></html>运行实例 »
点击 "运行实例" 按钮查看在线实例
更多相关文章
- js之留言板实例
- 变量,常量,数据类型,实例演示+函数参数与返回值+匿名函数及箭头
- 实例演示flex容器与项目中常用的属性
- 京东商城flex结构实例演示
- javascript常量，变量，数据类型实例
- flex实战项目：模仿某东首页
- flex容器与项目中常用的属性
- flex布局中容器及项目常用属性演示
- flex容器与项目的认识和常用属性