请问如何调整弹性盒子布局中项目的对齐方式？
站长
· 阅读数 11
弹性盒子布局：为什么这里
文字不在div中呢？还有当我设置width=1000时候，它们总是按照justify-content: space-evenly设置的间距，怎么样才能让最后两个div靠右呢？
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.head {
width: 1000px;
background-color: #fff;
border: 2px #e0e solid;
display: flex;
height: 50px;
justify-content: center;
margin: 10px;
}
span {
display: block;
}
.head_item {
width: 100px;
margin: 10px;
text-align: center;
}
.box {
width: 1000px;
background-color: #666;
border: 2px #e0e solid;
margin: 10px;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: flex-start;
}
.box_item{
margin: 10px;
}
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div class="head">
<div class="head_item">
<span><b>精选</b></span>
<span>猜你喜欢</span>
</div>
<div class="head_item">
<span><b>精选</b></span>
<span>猜你喜欢</span>
</div>
<div class="head_item">
<span><b>精选</b></span>
<span>猜你喜欢</span>
</div>
<div class="head_item">
<span><b>精选</b></span>
<span>猜你喜欢</span>
</div>
<div class="head_item">
<span><b>精选</b></span>
<span>猜你喜欢</span>
</div>
<div class="head_item">
<span><b>精选</b></span>
<span>猜你喜欢</span>
</div>
</div>
<div>
<div class="box">
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
<div class="box_item">
<div style="background-color: #fff; width: 200px;">
<img src="//img10.360buyimg.com/jdcms/s460x460_jfs/t1/224488/23/15341/106339/65ffc490Fee750704/beaff55bf9ff2ce8.jpg.avif" alt="">
<div class="box_item_txt">价格9999</div>
<div class="box_item_txt">价格9999</div>
</div>
</div>
</div>
</div>
</body>
</html>回复
1个回答
test
2024-06-19
第一个问题在head设置了一个固定大小的height, flex子元素的高度都被拉伸（align-items: stretch）到了该大小，而不是子元素的的高度由自身的内容决定。去掉这里的height: 50px就可以了，这时这行的高度由最高的那个元素决定。
.head {
...
height: 50px;
...
}第二个问题
方案一 这不好解决，你可以使用
margin来处理最后两个元素。但是最后两个之间的间距（--gap）以及倒数第二个和左边界的间距需要和前面的间距保持一致。这需要你自己测量一下，并且只对当前宽度有效。当width变化的时候，前面的间距变化了，最后两个还保持之前的，就不协调了。.last-item { margin-right: auto; margin-left: var(--gap); } .second-last-item { margin-inline:var(--gap); }- 方案二 不使用
justify-content: space-evenly，间距通过margin或padding来实现。 - 方案三 采用
grid布局。设置好一共多少列，每列多宽（grid-template-columns），列与列之间的间距(column-gap)，行与行之间的间距(row-gap)，与边界的间距通过padding来设置。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容