html - 请问如何调整弹性盒子布局中项目的对齐方式？
弹性盒子布局：
为什么这里
文字不在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个答案
第一个问题
在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来设置。
-
弹性盒子（Flexible Box）是一种用于按行或按列布局元素的一维布局方法，使用该布局的组件即为弹性容器（flex container），容器内的直系子组件则是弹性项目（flex item），他们可以膨胀以填充额外的空间，收缩以适应更小的空间，它们在 CSS 属性都为初始的情况下都会有下列行为： 项目排列成一行。（容器的 flex-direction 属性的初始值是 row） 项目从主轴的起始
-
问题内容： 是否有比使用方法更灵活的“联系人”右对齐方式？ http://jsfiddle.net/vqDK9/ 问题答案： 干得好。设置柔性容器上。
-
弹性盒子无法居中 跟着写的代码运行不出来
-
8. Alignment 在弹性容器处理完内容伸缩和弹性项目的尺寸确定后，将开始处理内容对齐。 和block布局中类似，flex布局中的margin属性可以用来调整项目，但功能要更强大。 弹性项目也遵循CSS Box Alignment Level 3中定义的对齐属性，在主轴线和垂直轴线方向使用简单的基于关键字的项目对齐。 这些属性使得一些常用的对齐方式变得极其简单，比如水平、垂直居中，而这在CS
-
弹性盒布局模型中引入了一些新的属性，只要设置好相应属性，盒子就具有弹性，在改变浏览器窗口大小时，盒子大小也会自动发生变化。并且，盒子的大小由浏览器自动计算，使页面布局更加灵活、更加简单，可以很轻松创建自适应浏览器窗口的流式布局。 如，在class = "father" 的父元素中，包含class = "box1"、class = "box2"、class = "box3"三个子元素。HTML代码如
-
Web 应用中，布局设计是非常重要的一部分。随着响应式设计的盛行，一般都要求 Web 应用能够适配不同尺寸的设备。响应式设计中最重要的一环就是布局，需要根据窗口尺寸来调整布局，从而改变元素的尺寸和位置，以达到最佳的显示效果，这也使得布局的逻辑变得更加复杂。 CSS3中，提出了弹性布局盒模型（Flex Layout Box Model），它一种全新的布局方式，其目的是提供一种更加高效的方式，来对容器