flexbox 相关问题

CSS3模块提供灵活的布局，提供了广泛的对齐元素选项，同时无需浮动和表格。

我在网页上创建了一个“日程日历”，它应该根据后端模型中提供的数据显示现有的约会：我在网页上创建了一个“日程日历”，它应该根据后端模型中提供的数据显示现有的约会：<table class="calendar"> <thead> <tr class="calendar-row"> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody>  <tr th:each="week : ${calendar}" class="calendar-row"> <th:block th:each="day : ${week}"> <td th:if="${day}" class="day-cell"> <span class="day-number" th:text="${day.getDayOfMonth()}"></span> <div class="appointment" th:each="appointment : ${appointments}" th:if="${appointment.date.toLocalDate().isEqual(day.toLocalDate())}" th:text="|${appointment.date.toLocalTime().toString()} - ${appointment.title}|"> </div> </td> <td th:unless="${day}" class="empty-day-cell"></td> </th:block> </tr> </tbody> </table> 样式表：.calendar { border-collapse: separate; } .calendar th, .calendar td { text-align: center; width: 100%; } .calendar-row { display: flex; flex-direction: row; justify-content: space-evenly; align-items: stretch; } .empty-day-cell { position: relative; min-width: 80px; min-height: 80px; } .day-cell { border: 1px solid #000000; border-radius: 5px; position: relative; min-width: 80px; min-height: 80px; padding-top: 1.5rem; display: flex; flex-direction: column; align-items: stretch; } .day-number { position: absolute; top: 5px; right: 5px; font-size: 12px; } .appointment { width: fit-content; margin: 0 10%; margin-bottom: 0.5rem; white-space: nowrap; border: 1px solid #000000; border-radius: 10px; color: black; background: teal; padding: 0 10%; } 结果如下所示（粘贴图像，而不是 jsfiddle 链接，因为所有 Thymeleaf 标签在没有后端数据的情况下都无法正常工作）：编辑：也链接：https://jsfiddle.net/zax3fq7c/ 不幸的是，单元格似乎无法帮助我调整自身大小以适应“约会”大小...... 尽管我相信我在创建此布局时理解了这个概念，但很可能我搞砸了弹性盒。这里出现几个问题：如何使单元格自行调整大小，以便任务包含在单个单元格中，而不是像图像上那样重叠？我怎样才能让多个预约如22日所示，与最长的一个预约的盒子尺寸相同？（美观且不是很重要）第一个和第二个框比下面几行中的框稍宽，我找不到这背后的原因，有人可以向我解释一下吗？我想这与“empty-day-cell”中没有边框有关，但给它 1px 透明边框实际上不会改变任何东西。您走在正确的道路上。我对你的风格做了一些调整......如下。我将overflow hide与flex结合使用来隐藏/显示溢出的内容。（截断奖励也添加在那里；-）我用“auto”和“100%”替换了大部分最小宽度和最小高度规则，以使这些约会框具有其容器的完整宽度。最后，您需要重置第一行单元格的左/右填充并指定“边框：1px纯透明”或完全删除边框。 .calendar { font-family: 'Arial', helvetica, sans-serif; width: 100%; } .calendar th, .calendar td { min-height: 80px; text-align: center; width: 100%; } .calendar-row:first-child > td.day-cell { padding-right: 0; padding-left: 0; } .calendar-row { display: flex; flex-direction: row; justify-content: stretch; } .calendar-row th { display: flex; justify-content: center; align-items: center; } .empty-day-cell, .day-cell { border: 1px solid transparent !important; border-radius: 3px; margin: 0.1rem; padding: 0; position: relative; width: auto; height: auto; text-align: left; } .day-cell { background: #eeeeeecc; padding: 1.5rem 0.25rem 0 0.25rem; overflow: hidden; transition: all .2s ease; } .day-number { background: #ffffffcc; border-top-right-radius: 3px; margin: 0; padding: 0.1rem 0.2rem; position: absolute; top: -1px; right: -1px; font-size: 12px; } .appointment { width: 100%; border-radius: 10px; color: black; background: #ccb9ffcc; box-sizing: border-box; margin: 0 0 0.25rem 0; padding: 0.1rem 0.5rem; font-size: 13px; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .day-cell:has(.appointment):hover { background-color: #e1daf0cc; overflow: unset !important; flex-grow: 1 !important; padding: 1.5rem 0.75rem 0 0.75rem; } .day-cell:has(.appointment):hover > div { display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: unset !important; white-space: nowrap; } <table class="calendar"> <thead> <tr class="calendar-row"> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody>  <tr class="calendar-row"> <td class="empty-day-cell"></td> <td class="empty-day-cell"></td> <td class="empty-day-cell"></td> <td class="empty-day-cell"></td> <td class="empty-day-cell"></td> <td class="day-cell"> <span class="day-number">1</span> </td> <td class="day-cell"> <span class="day-number">2</span> </td> </tr> <tr class="calendar-row"> <td class="day-cell"> <span class="day-number">3</span> </td> <td class="day-cell"> <span class="day-number">4</span> </td> <td class="day-cell"> <span class="day-number">5</span> </td> <td class="day-cell"> <span class="day-number">6</span> </td> <td class="day-cell"> <span class="day-number">7</span> </td> <td class="day-cell"> <span class="day-number">8</span> </td> <td class="day-cell"> <span class="day-number">9</span> </td> </tr> <tr class="calendar-row"> <td class="day-cell"> <span class="day-number">10</span> </td> <td class="day-cell"> <span class="day-number">11</span> </td> <td class="day-cell"> <span class="day-number">12</span> </td> <td class="day-cell"> <span class="day-number">13</span> </td> <td class="day-cell"> <span class="day-number">14</span> </td> <td class="day-cell"> <span class="day-number">15</span> </td> <td class="day-cell"> <span class="day-number">16</span> </td> </tr> <tr class="calendar-row"> <td class="day-cell"> <span class="day-number">17</span> </td> <td class="day-cell"> <span class="day-number">18</span> </td> <td class="day-cell"> <span class="day-number">19</span> </td> <td class="day-cell"> <span class="day-number">20</span> </td> <td class="day-cell"> <span class="day-number">21</span> </td> <td class="day-cell"> <span class="day-number">22</span> <div class="appointment">14:15 - Some Job</div> <div class="appointment">16:15 - Other Task</div> <div class="appointment">18:15 - Even Longer Task</div> </td> <td class="day-cell"> <span class="day-number">23</span> </td> </tr> <tr class="calendar-row"> <td class="day-cell"> <span class="day-number">24</span> </td> <td class="day-cell"> <span class="day-number">25</span> <div class="appointment">14:00 - Presentation</div> </td> <td class="day-cell"> <span class="day-number">26</span> </td> <td class="day-cell"> <span class="day-number">27</span> </td> <td class="day-cell"> <span class="day-number">28</span> <div class="appointment">10:30 - Training Location</div> </td> <td class="day-cell"> <span class="day-number">29</span> </td> <td class="day-cell"> <span class="day-number">30</span> </td> </tr> </tbody> </table>

html css flexbox

回答 1 投票 0

砌体网格未填充空白空间

我一直在使用 Sveltekit 和 SCSS 来构建 Masonry 网格。然而，在我的砖石网格中，所有项目都应该填充空白空间，而是由最大图像决定，并且不填充任何

css flexbox sveltekit

回答 1 投票 0

使用 CSS 将视口滚动限制到部分内容

我喜欢有一行元素（例如内联块，可能在弹性容器中），它们可以溢出视口。然而，第一个和最后一个是虚拟的，被认为是非内容，只是出现

html css flexbox

回答 1 投票 0

如何在html中添加图标

如何在 html 和 css 中添加图标？我的作业需要这个，它需要文本旁边的图标，所以我尝试添加图标并观看教程，但我无法理解它们前像这样（...

html css flexbox icons

回答 1 投票 0

使用 Flexbox 和 object-fit 时出现 Box-shadow 问题

我想要一个充满整个屏幕的容器。里面是与中心对齐的图像。该图像没有任何特定尺寸。我正在使用过渡效果来显示来自...的图像

html css flexbox

回答 1 投票 0

将 *ngFor 数据拆分为 2 列

我有这个html： {{项目.标签}}<... 我有这个html： <div class="w-full flex justify-center"> <div *ngFor="let item of items" class="flex w-1/2"> <span>{{item.label}}</span> <span>{{item.value}}</span> </div> </div> 这样UI中的html显示为： LABEL 1 - VALUE 1 | LABEL 2 - VALUE 2 LABEL 3 - VALUE 3 | LABEL 4 - VALUE 4 LABEL 5 - VALUE 5 | LABEL 6 - VALUE 6 我需要显示这样的数据： LABEL 1 - VALUE 1 | LABEL 4 - VALUE 4 LABEL 2 - VALUE 2 | LABEL 5 - VALUE 5 LABEL 3 - VALUE 3 | LABEL 6 - VALUE 6 我一直在努力寻找可行的解决方案，但运气不佳。你能建议工作解决方案吗？将 items 数组分成两半。 chunkedItems: any[][] = []; let halfIndex = Math.floor(this.items.length / 2); this.chunkedItems = [ this.items.slice(0, halfIndex), this.items.slice(halfIndex, this.items.length), ]; } 并按如下方式构建弹性容器： <div class="w-full flex flex-wrap justify-center"> <ng-container *ngFor="let chunks of chunkedItems; let i = index"> <div class="flex flex-col w-1/2"> <div *ngFor="let item of chunks" class="flex"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> </div> </ng-container> </div> 演示@StackBlitz 试试这个代码 {{item.label}} - {{item.value}} {{item.label}} - {{item.value}} @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { items = [ { label: 'LABEL 1', value: 'VALUE 1' }, { label: 'LABEL 2', value: 'VALUE 2' }, { label: 'LABEL 3', value: 'VALUE 3' }, { label: 'LABEL 4', value: 'VALUE 4' }, { label: 'LABEL 5', value: 'VALUE 5' }, { label: 'LABEL 6', value: 'VALUE 6' } ]; firstColumnItems() { return this.items.filter((item, index) => index % 3 === 0 || index % 3 === 1); } secondColumnItems() { return this.items.filter((item, index) => index % 3 === 2); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script> <div class="w-full flex justify-center"> <div class="w-1/2" *ngFor="let item of firstColumnItems()"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> <div class="w-1/2" *ngFor="let item of secondColumnItems()"> <span>{{item.label}}</span> - <span>{{item.value}}</span> </div> </div>

angular flexbox ngfor

回答 2 投票 0

禁用网格元素收缩

我正在做一个宠物项目，但遇到了问题。我需要网格中的两个 div 在移动设备上具有相同的高度，并且我想在它们溢出时添加滚动。但现在上面的那个挤了l...

html css flexbox grid tailwind-css

回答 1 投票 0

如何正确布局类似的标题块

请帮忙，我不明白如何在标题中正确布局这样的块，有一个容器（1440px没关系），里面有一个徽标压在左侧，如何处理...

html css flexbox css-grid

回答 1 投票 0

为什么在这个简单的测试用例网页中，flex子元素没有收缩？

我有一个运行完美的网页，在 ResizeObserver 的帮助下调整了子画布元素（带有兔子的棋盘）的大小，同时保持其 1:1 的纵横比，当浏览器...

css flexbox aspect-ratio pixi.js resize-observer

回答 1 投票 0

如何使用 css 和 html 将文本置于其自己的边框中

之前后（注：1.使用grid和flex 2. 不介意语言（越南语） 3. 这是我第一次在 Stackoverflow 寻求帮助 4. 如果你在c中遇到一些“语言”问题...

html css flexbox border text-align

回答 1 投票 0

如果我设置 flex-grow: 1，为什么 Flex 项目的高度不一样？

这是jsfiddle链接https://jsfiddle.net/n7ajthL2/4/ 超文本标记语言 ... 这是 jsfiddle 链接 https://jsfiddle.net/n7ajthL2/4/ HTML <div class="left-right-container"> <div class="left"> <div> <h4>lorem</h4> <p>Lorem ipsum doler sit amet</p> </div> <div> <h4>Lorem ipsum</h4> <p>Lorem ipsum doler sit amet</p> <ol> <li>Lorem ipsum dolor sit amet, conseteturS</li> <li>Lorem ipsum dolor sit amet, consetetur</li> <li>Lorem ipsum dolor sit amet, consetetur</li> <li>Lorem ipsum dolor sit amet, consetetur</li> </ol> </div> </div> <div class="right"> <div> <h4>Lorem ipsum dolor</h4> <p>Lorem ipsum dolor sit amet, consetetur</p> <dl> <dt>Lorem ipsum</dt> <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</dd> <dt>Lorem ipsum</dt> <dd> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam <br><br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</dd> </dl> </div> </div> </div> 比如说，我希望左侧的 2 个元素具有相同的高度。我添加了 flex-grow: 1 但较高和较低的元素高度不同。为什么？如何使它们的高度相同？我建议使用 grid 而不是 flexbox ，在下面的示例中，我可以用很少的行来实现您想要的结果。为此使用 Flexbox 需要做更多的工作。 #red { background-color: red; } #green { background-color: green; } #blue { background-color: blue; } .square { padding: 1rem; } .left { display: grid; gap: 1rem; grid-template-rows: 1fr 1fr; } .container { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } <div class="container"> <div class="left"> <div id="red" class="square"> <h4>lorem</h4> <p>Lorem ipsum doler sit amet</p> </div> <div id="green" class="square"> <h4>Lorem ipsum</h4> <p>Lorem ipsum doler sit amet</p> <ol> <li>Lorem ipsum dolor sit amet, conseteturS</li> <li>Lorem ipsum dolor sit amet, consetetur</li> <li>Lorem ipsum dolor sit amet, consetetur</li> <li>Lorem ipsum dolor sit amet, consetetur</li> </ol> </div> </div> <div id="blue" class="square"> <h4>Lorem ipsum dolor</h4> <p>Lorem ipsum dolor sit amet, consetetur</p> <dl> <dt>Lorem ipsum</dt> <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</dd> <dt>Lorem ipsum</dt> <dd> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam <br><br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </dd> </dl> </div> </div>

html css flexbox

回答 1 投票 0

阻止 Flexbox 以任何方式改变子尺寸

我的页面上有以下标记：我的页面上有以下标记： <h1 id="some-fragment"> <a href="#some-fragment" class="fragment-link"> <svg height="16" width="16" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2"> <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> </a> Header text <code>Ooh, a code block</code> </h1> 使用以下 CSS： /* irrelevant to this, but looks better */ a { text-decoration: none } h1 { display: flex; align-items: center; } svg { display: block; } code { padding: 2px 4px; background: #888; border-radius: 4px; } 我想做的是垂直对齐标题文本旁边的图标，但是当我添加 display: flex 时，代码块看起来超级愚蠢。它被标题文本压碎，失去了“文本”后面的间距，并且与文本相比，它似乎增长并垂直偏离中心。 flex-grow: 0 的组合似乎在这里没有效果。我只是希望它看起来与没有display: flex时相同，但图标位于其旁边的中心。向 h1 gap: 5px; align-items: flex-end 添加属性是否会使其看起来更像您想要的？可能最好的 Flexbox 资源就在这里：Flexbox 提示和技巧

html css flexbox

回答 1 投票 0

创建一个 1:1 比例的元素，在另一个元素内居中

我正在尝试创建一些矩形盒子，里面有圆形（不是卵形）盒子。目前我得到的行为是这样的：而我期待的行为是圆圈（即......

javascript html css flexbox

回答 1 投票 0

如何使用flexbox创建动态方块？

我在设置我正在做的草图项目的动态部分时遇到一些困难。接下来我要实现的想法是，

javascript css dynamic flexbox resize

回答 1 投票 0

布局类似于表格的弹性框？

我正在使用内部开发的框架，该框架依赖于我们的 HTML 的特定结构。其中棘手的事情之一是每一行都需要自己的容器，其中包含自己的类和数据