连云港网站建设,贵州网站建设工作室,重庆城乡建设网站首页,网站开发包含网页设计吗简单概述
为元素添加 display:flex; 的属性后#xff0c;当前元素被视为弹性布局的盒子容器(box)#xff0c;其子元素被视为弹性布局项目(item)。item 会在 box 内灵活布局#xff0c;解决了对齐、分布、尺寸等响应式问题。
演示 demo
templatediv class 的属性后当前元素被视为弹性布局的盒子容器(box)其子元素被视为弹性布局项目(item)。item 会在 box 内灵活布局解决了对齐、分布、尺寸等响应式问题。
演示 demo
templatediv classmainBoxdiv classboxdivv-for(item, index) in data:keyindexclassitem:style{background: item.background, height: item.height, width: item.width,}{{ item.msg }}/div/div/div
/template
script
export default {data() {return {data: [{ msg: 111, background: #3E445E, width: 100px, height: 50px, },{ msg: 222, background: #D0D3DA, width: 100px, height: 60px, },{ msg: 333, background: #505A9B, width: 100px, height: 70px, },{ msg: 444, background: #7394CD, width: 100px, height: 80px, },{ msg: 555, background: #F1E2D0, width: 100px, height: 90px, },{ msg: 666, background: #F6CFA3, width: 100px, height: 100px, },{ msg: 777, background: #E18792, width: 100px, height: 110px, },{ msg: 888, background: #907AC3, width: 100px, height: 120px, },],};},
};
/script
style langless scoped
.mainBox {width: 100%;height: 100%;
}
.box {display: flex;padding: 40px;border: 1px solid #333;.item {color: #fff;}
}
/style下述属性演示都在以上代码的基础上进行 用于盒子容器(box)的属性
flex-direction
设置 box 内弹性 item 的方向取值row / row-reverse / column / column-reverseflex-direction: row; 行模式-从左到右排列默认值.box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: row;
}flex-direction: row-reverse; 行模式-从右到左排列.box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: row-reverse;
}flex-direction: column; 列模式-从上到下排列.box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: column;
}flex-direction: column-reverse; 列模式-从下到上排列.box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: column-reverse;
}flex-wrap
让 box 在必要的时候换行取值nowrap / wrapflex-wrap: nowrap; 不换行默认值.box {display: flex;padding: 40px;border: 1px solid #333;flex-wrap: nowrap;
}
/* 减小 box 宽度时item 的宽度失效被压缩 */flex-wrap: wrap; 换行.box {display: flex;padding: 40px;border: 1px solid #333;flex-wrap: wrap;
}
/* 减小 box 宽度时item 的宽度不变不会被压缩自动换行 */justify-content
设置 box 内弹性 item 的对齐分布方式取值flex-start / flex-end / center / space-between / space-around / space-evenly为方便观察不同属性的对比移除了 box 的 padding 属性justify-content: flex-start; 起点对齐默认值.box {display: flex;border: 1px solid #333;justify-content: flex-start;
}justify-content: flex-end; 结束点对齐.box {display: flex;border: 1px solid #333;justify-content: flex-end;
}justify-content: center; 居中对齐.box {display: flex;border: 1px solid #333;justify-content: center;
}justify-content: space-between; 两端对齐.box {display: flex;border: 1px solid #333;justify-content: space-between;
}justify-content: space-around; 周围分布-视作 margin 效果的话相当于每个 item 的 margin-left 和 margin-right 值相同.box {display: flex;border: 1px solid #333;justify-content: space-around;
}
/* margin-right margin-left (box 的宽度 - item 的宽度 * 8) / (8 * 2) */justify-content: space-evenly; 均匀分布-视作 margin 的话均匀分配剩余空间每个 item 的 margin-left 值相等最后剩下的空隙值与 item 的 margin-left 相等.box {display: flex;border: 1px solid #333;justify-content: space-evenly;
}
/* margin-right 0 */
/* margin-left (box 的宽度 - item 的宽度 * 8) / (8 1) */align-items
设置 box 内弹性 item 的针对交叉轴的对齐分布方式取值flex-start / flex-end / centeralign-items: flex-start; 起点对齐默认值.box {display: flex;padding: 40px;border: 1px solid #333;align-items: flex-start;
}align-items: flex-end; 结束点对齐.box {display: flex;padding: 40px;border: 1px solid #333;align-items: flex-end;
}align-items: center; 居中对齐.box {display: flex;padding: 40px;border: 1px solid #333;align-items: center;
}align-content 设置多轴线 box 内弹性 item 的对齐分布方式 取值flex-start / flex-end / center / space-between / space-around / space-evenly 为方便观察不同属性的对比移除了 box 的 padding 属性 为外层父盒子添加 flex 属性形成多轴线的盒子 align-content: flex-start; 起点对齐 .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: flex-start;}
}align-content: flex-end; 结束点对齐 .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: flex-end;}
}align-content: center; 居中对齐 .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: center;}
}align-content: space-between; 两端对齐 .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-between;}
}align-content: space-around; 周围分布 .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-around;}
}align-content: space-evenly; 均匀分布 .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-evenly;}
}用于弹性项目(item)的属性
order
设置 box 内弹性 item 的排序取值Num取值越小越靠前默认为 0.item {color: #fff;:nth-child(1) {order: 4;}:nth-child(2) {order: 3;}:nth-child(3) {order: 0;}:nth-child(4) { }:nth-child(5) {order: 2;}
}flex-grow
设置 box 内弹性 item 的扩展系数取值Num取值越小扩展比例越小默认为 0.item {color: #fff;:nth-child(1) {flex-grow: 1;}:nth-child(2) {flex-grow: 3;}:nth-child(3) {flex-grow: 1;}:nth-child(4) { }:nth-child(5) { }
}flex-basis
设置 box 内弹性 item 的初始宽度会覆盖原有宽度属性取值像素值.item {color: #fff;:nth-child(1) {flex-basis: 50px;}:nth-child(2) {flex-basis: 100px;}:nth-child(3) {flex-basis: 150px;}:nth-child(4) {flex-basis: 200px;}:nth-child(5) {flex-basis: 250px;}
}flex-shrink
设置 box 内弹性 item 的收缩系数取值Num取值越小压缩比例越小默认为 1 取值为 0 时不会被压缩.item {color: #fff;:nth-child(1) {flex-shrink: 1;}:nth-child(2) {flex-shrink: 2;}:nth-child(3) {flex-shrink: 3;}:nth-child(4) {flex-shrink: 0;}:nth-child(5) {flex-shrink: 0;}
}
