iis7 支持html5,HTML5 弹性布局的实现与相关属性

弹性布局相关属性

flex-direction相关属性

flex-wrap相关属性

justify-content相关属性

align-items相关属性

align-content相关属性

样例Demo

效果图：

HTML5 实现：

弹性布局

*{

margin: 0;

padding: 0;

}

.box{

width: 50px;

height: 50px;

border: 1px solid blueviolet;

text-align: center;

line-height: 50px;

}

.flex-item1{

background: red;

order: 3;/*设置伸缩向的排序*/

}

.flex-item2{

background: green;

order: 1;/*设置伸缩向的排序*/

}

.flex-item3{

background: blue;

order: 2;/*设置伸缩向的排序*/

}

.flex-container1{

display: flex;

flex-direction: row;

flex-wrap: wrap;

/*主轴对齐*/

justify-content: flex-start;

}

.flex-container2{

display: flex;

flex-direction: row;

flex-wrap: wrap;

ustify-content: flex-end;

}

.flex-container3{

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-around;

}

.flex-container4{

display: flex;

flex-direction: column;

flex-wrap: wrap;

justify-content: space-around;

}

.flex-center1{

/*伸缩向分配空间格式：flex：flex-grow;flex-fhrink;flex-grow*/

/*表示除了占据原先的宽度外，还要分配剩余宽度(包括扩展或收缩)*/

flex: 1 1 auto;

}

.flex-center2{

/*表示分配所有宽度(包括扩展或收缩)*/

flex-basis: 0%;

flex-shrink: 1;

flex-grow: 1;

}

水平排列

flex:1 1 auto

1

1

auto

flex-basis: 0%;flex-shrink: 1;flex-grow: 1;

1

1

auto

justify-content: flex-start;

1

1

auto

justify-content: flex-end;

1

1

auto

justify-content: space-around;;

1

1

auto

垂直排列

1

1

auto

原文链接：https://blog.youkuaiyun.com/weixin_46085790/article/details/112609851