请问如何调整弹性盒子布局中项目的对齐方式？

Question

请问如何调整弹性盒子布局中项目的对齐方式？

19216

发布于
2024-04-13 湖北

更新于
2024-04-13

弹性盒子布局：
为什么这里
文字不在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>

html css

html5 css3

chrome

阅读 354

1 个回答

得票最新

peterhuan

6812965

发布于
2024-04-13 山东

✓ 已被采纳

第一个问题
在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来设置。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

请问如何调整弹性盒子布局中项目的对齐方式？

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

如何实现从一个div中拖拽dom到另一个div容器？

css3如何实现这样的圆环效果?

echarts底部滑块不要背景色的问题？

图片沿着圆环的转动有什么方法吗？

请问如何调整弹性盒子布局中项目的对齐方式？

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

如何实现从一个div中拖拽dom到另一个div容器？

css3如何实现这样的圆环效果?

echarts底部滑块不要背景色的问题？

图片沿着圆环的转动有什么方法吗？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？