弹性布局flex
主轴
/* 给父元素添加 */ display: flex; /* 子元素两边靠边,中间自适应 */ justify-content: space-between; /* 子元素,两边宽度比中间宽度为 1:2 */ justify-content: space-around; /* 从开始位置依次靠右排 */ justify-content: start; /* 从结束位置依次靠左排 */ justify-content: flex-end; /* 全部等比例排 */ justify-content: space-evenly; /* 居中 */ justify-content: center;
侧轴
给父元素加
/* 从开始排列盒子 */ align-items: start; /* 居中 */ align-items: center; /* 从下排列盒子 */ align-items: end; /* 默认值 拉伸 */ align-items: stretch;
给子元素加
.box div:first-child { /* 侧轴 从开始依次排列 */ align-self: start; } .box div:nth-child(2) { background-color: aqua; /* 居中 */ align-self: center; } /* 从结束往前依次排 */ .box div:last-child { align-self: flex-end; }
圣杯布局
.box{ width: 100%; height: 50px; background-color: pink; display: flex; /* 最小伸缩值 */ min-width: 400px; /* 最大伸缩值 */ max-width: 500px; } .left, .fight{ width: 50px; height: 50px; background-color: blue; } .center{ /* 伸缩比 */ flex: 1; width: 50px; background-color: gold;