flexbox 相关问题

我需要创建一个像这样的部分：这是我已经尝试过的：我需要创建一个像这样的部分：这是我已经尝试过的： <div class="container"> <div v-for="(step, index) in steps" :key="index" class="step" > <div class="content"> <div class="icon"> // ICON CONTENT </div> <h3 class="title"> // TITLE CONTENT </h3> <p class="description"> // DESCRIPTION CONTENT </p> </div> <div v-if="index + 1 < steps.length" class="step-process__divider" /> </div> </div> 和CSS： .container { display: flex; justify-content: space-between; } .content { display: flex; flex-direction: column; align-items: center; text-align: center; } .step { display: flex; flex-direction: row; align-items: center; } .divider { background-color: #d9d9d9; border-radius: .2rem; height: 2px; width: 3rem; margin-top: 1.2rem; transform: translateY(-50%); margin: { left: $spacing--22; right: $spacing--22; } } ... 问题是分隔线看起来并不总是位于两个步骤元素之间的中心。有没有更好的方法来实现这个目标？我希望您使用 CSS-pseudo 元素和 CSS-selectors，具体来说，:not、first-child、last-child、before 和 after。您可以使用 :not 选择器获取不是第一个或最后一个的子元素，即它们之间的任何内容，然后在组件之前和之后添加行。请参阅此工作示例： .container { display: flex; justify-content: space-between; } .content { display: flex; align-items: center; text-align: center; } .step { display: flex; flex-direction: row; align-items: center; } .divider { background-color: #d9d9d9; border-radius: .2rem; height: 2px; width: 3rem; margin-top: 1.2rem; transform: translateY(-50%); margin: { left: $spacing--22; right: $spacing--22; } } .custom-class:not(:first-child):not(:last-child) { display: flex; align-items: center; justify-content: center; } .custom-class:not(:first-child):not(:last-child)::before { content: '—'; } .custom-class:not(:first-child):not(:last-child)::after { content: '—'; } <div class="container"> <div v-for="(step, index) in steps" :key="index" class="step"> <div class="content"> <div class="custom-class icon"> ICON CONTENT </div> <h3 class="custom-class title"> TITLE CONTENT </h3> <p class="custom-class description"> DESCRIPTION CONTENT </p> </div> <div v-if="index + 1 < steps.length" class="step-process__divider" /> </div> </div>

html css flexbox css-grid styling

回答 1 投票 0

React Native 负弯曲（弯曲：-1）

实际上flex（flex：1）占据了屏幕的可用空间，所以如果我们设置负值该怎么办。就像 flex:-1.

react-native flexbox

回答 2 投票 0

如何使弹性框列保持 100% 高度，无论其中图像的宽度如何？

我是 html css 的初学者。我正在尝试制作一个包含 3 列 div 的基本 html css 页面。其中 2 个宽度各为 40%，其中一个仅用于按钮或文本，因此宽度为 15-20%。总高度...

html css image flexbox

回答 1 投票 0

当我到达断点480px时，我在body上设置的右侧填充消失了

我的代码中有一些文章显示了网格。我已经将body的padding设置为padding: 0 1em;以下元素和类的最小宽度为 450px；有人可以吗

css flexbox grid media-queries padding

回答 1 投票 0

为什么 flex: 0;覆盖宽度属性？

这是我教学网页设计的第一年，我们正在讨论弹性盒布局。我遇到了 flex 属性的问题，我无法在任何地方找到解释。我已经评论过这个你...

flexbox

回答 1 投票 0

主轴方向弹性项目溢出

我对这个问题感到非常抱歉，因为我已经在这里看到了很多类似的问题，但我仍然无法弄清楚。我想创建一个带有显示元素控件的覆盖元素...

html css flexbox

回答 1 投票 0

使边框底部或下划线延伸到文本之上

我试图弄清楚如何扩展该元素的边框底部，使其与模型相匹配，但我似乎无法做到这一点。它只真正位于文本部分下方。我怎样才能做到这一点

html css flexbox border

回答 1 投票 0

在 ul 元素中留出间隙

如何使我的三个元素均匀伸展？我想成为这样这就是我，正在编码。柔性 { 显示：柔性； } .js-空格之间{ justify-content：空间之间； } 如何使我的三个元素均匀伸展？ .flex { display: flex; } .js-spacebetween { justify-content: space-between; } <footer class="padding-footer"> <div class="wrapper-80 flex js-spacebetween"> <div class="left"> <img src="./images/Vector (3).png" alt="white logo" /> <p>International Foundation for Electoral Systems (IFES)</p> <div class="flex"> <p><i class="fa-solid fa-phone"></i>+389-2-312-2288</p> <p><i class="fa-regular fa-envelope"></i>[email protected]</p> </div> </div> <div class="center"> <ul> <a href="#">Информирај се</a> <a href="#">Дискусии</a> <a href="#">Контакт - корисни линкови</a> <a href="#">Закон за заштита на личните податоци</a> </ul> </div> <div class="right"> <ul> <li>MK | AL</li> <li> <a href="#"><i class="fa-brands fa-square-facebook"></i></a> <a href="#"><i class="fa-brands fa-instagram"></i></a> <a href="#"><i class="fa-brands fa-youtube"></i></a> <a href="#"><i class="fa-brands fa-tiktok"></i></a> </li> <li>© All Rights Reserved. | safeblink.mk</li> </ul> </div> </div> </footer> 别在意造型，我想要的只是设计像图片一样你需要做的是在CSS中添加一条额外的规则，给所有3个div的宽度为100%，它们将占据均匀的宽度。 .left, .center, .right { width: 100%; } 然后，您可以进入每个 div 并再次弯曲以满足您的设计要求，但上述内容可确保它们都占据相同的宽度。

html css flexbox

回答 1 投票 0

如何在弹性布局中重复换行上的第一个元素？

我有很多序列。每个序列都有一个名称和一个字符数组。我必须将字符垂直对齐：序列1 AGCAGTAGACAGTAGTACGTACGATAGCTCGACTAGCA 序列2

html css flexbox

回答 2 投票 0

CSS 间隙与边距

CSS的gap属性和margin属性之间的主要区别是什么？对于以下 html 代码，什么时候应该使用间隙和边距？ CSS的gap属性和margin属性之间的主要区别是什么？对于以下 html 代码，什么时候应该使用间隙和边距？ <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> gap css 属性和 margin 之间的主要区别在于 gap 在项目之间创建空间，而 margin 在每个项目周围创建空间。例如，下面的 gap 用于在网格项之间创建 20 像素的空间。在第二个示例中，边距用于在每个弹性项目周围创建 10 个像素的空间。 <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> /* I. option: Using gap */ .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* II. option: Using margin */ .container { display: flex; flex-wrap: wrap; margin: -10px; } .item { flex: 1 0 calc(50% - 20px); margin: 10px; } 虽然 margin 在某些情况下表现良好，但 gap 的一般优点是： gap 对于可重用组件来说更可取 gap让造型变得很多代码变得更干净、更容易维护开箱即用的响应式设计需要更少的计算：每个元素相对于彼此的位置来自父组件注意： gap 可用于弹性盒和网格布局

html css gridview flexbox grid

回答 1 投票 0

如何用我的卡片填充我的容器？（弹性）

我是html新手，我想创建填充容器的卡片。 HTML：服务1... 我是 html 新手，我想创建填充容器的卡片。 HTML： <div class="services-container> <div class="services-card"> <h3>Services 1</h3> <p>Services Information</p> </div> <div class="services-card"> <h3>Services 2</h3> <p>Services Information</p> </div> /!-- and more services --> </div> CSS： .services-container { display: flex; align-content: flex-start; } .services-card { display: flex; flex-direction: column; } 结果像这样的图片一样损坏了：如果有人可以帮助我并提供学习资源，我将不胜感激，谢谢。卡片填充容器而不会溢出设备宽度首先，您的代码在第一类“services-container”中缺少双引号。除此之外，我不知道我是否完全明白你的意思，但是如果你想用所有服务填充整个容器，你可以在 CSS 中添加 width: 100% 。就像这样： .services-card { display: flex; flex-direction: column; width: 100%; }

javascript html css flexbox frontend

回答 1 投票 0

flexbox 相关问题

最新问题