当前位置: 首页 > 面试题库 >

如何为flex为0:0 25%的flex项目添加1px页边距?

景俊良
2023-03-14
问题内容

我正在用flexbox测试几种不同的布局,但存在以下问题。

我有一个设置了弹性项目的图片库,flex:0 0 25%;我想给它们添加1px的边距,因为1%很大。所以我想知道在这种情况下该怎么办。

我附上以下示例。

#foto-container {

  display: flex;

  flex-wrap: wrap;

  flex: 1;

  justify-content: space-around;

  margin: 10px;

}



.foto {

  flex: 0 0 25%;

  min-height: 200px;

  background-color: red;

}





/*---------How I can add 1px to photo?-----------------*/


<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="foto-container">

  <div class="foto foto1">1</div>

  <div class="foto foto2">2</div>

  <div class="foto foto3">3</div>

  <div class="foto foto4">4</div>

  <div class="foto foto5">5</div>

  <div class="foto foto6">6</div>

  <div class="foto foto7">7</div>

  <div class="foto foto8">8</div>

  <div class="foto foto9">9</div>

  <div class="foto foto1">1</div>

  <div class="foto foto2">2</div>

  <div class="foto foto3">3</div>

</div>

谢谢,


问题答案:

您可以使用flex: 1 0 22%例如。这将使您的元素定义22%flex-basis
(因此,每行仅4个元素),并且它们将增长为填充边距剩余的剩余空间(因为flex-grow设置为1

#foto-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  margin: 10px;

}



.foto {

  flex: 1 0 22%;

  min-height: 50px;

  margin: 1px;

  background-color: red;

}


<div id="foto-container">

  <div class="foto foto1">1</div>

  <div class="foto foto2">2</div>

  <div class="foto foto3">3</div>

  <div class="foto foto4">4</div>

  <div class="foto foto5">5</div>

  <div class="foto foto6">6</div>

  <div class="foto foto7">7</div>

  <div class="foto foto8">8</div>

  <div class="foto foto9">9</div>

  <div class="foto foto1">1</div>

  <div class="foto foto2">2</div>

  <div class="foto foto3">3</div>

</div>

的值flex-basis应大于(20% - margin * 2)和小于(25% - margin * 2)。第一个值将使您每行具有5个元素,因此具有更大的值将使它们变为4,而具有比第二个更大的值将使元素数量为每行3。

#foto-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  margin: 10px;

}



.foto {

  flex: 1 0 21%;

  min-height: 50px;

  margin: 1px;

  background-color: red;

  animation: change 4s linear infinite alternate;

}



@keyframes change {

  0%,40% {flex: 1 0 calc(20% - 2 * 1px);background:yellow;}

  41%,59% {background:red;}

  60%,100% {flex: 1 0 calc(25% - 2 * 1px + 1px);background:green;}

}


<div id="foto-container">

  <div class="foto foto1">1</div>

  <div class="foto foto2">2</div>

  <div class="foto foto3">3</div>

  <div class="foto foto4">4</div>

  <div class="foto foto5">5</div>

  <div class="foto foto6">6</div>

  <div class="foto foto7">7</div>

  <div class="foto foto8">8</div>

  <div class="foto foto9">9</div>

  <div class="foto foto1">1</div>

  <div class="foto foto2">2</div>

  <div class="foto foto3">3</div>

</div>


 类似资料:
  • 问题内容: 我正在用flexbox测试几种不同的布局,但存在以下问题。 我有一个设置了弹性项目的图片库,我想为它们添加1px的边距,因为1%很大。所以我想知道在这种情况下该怎么办。 我附上以下示例。 谢谢, 问题答案: 您可以使用例如。这将使您的元素定义为 (每行仅4个元素),并且它们将增长以填充由边距留下的剩余空间(因为设置为) 的值应大于和小于。第一个值将使您每行具有5个元素,因此,具有更大的

  • 我遇到的最后一个问题与这里的链接相同:flexbox项目的宽度被忽略 一切看起来都很好,但在最后一刻,我想更改flex容器的方向,所以我添加了

  • 问题内容: 似乎flex div中的内容会影响有关属性的计算大小。难道我做错了什么? 在下面提供的小提琴中,您将看到一个数字键盘。除底行外,所有行均包含3个数字。该行应将“ 0”表示为2个数字的宽度,因此flex-grow: 2,“:”(冒号)应为1个数字的大小,因此。 我在这里想念什么吗? “ 0”的右侧应与其上方的8、5和2对齐。有点不对劲 问题答案: 简短分析 问题在于,第1-3行有两个水平

  • 我想知道是否有一种有效的方法来对齐不同的灵活项目(!)div flex容器,使flex项具有相同的宽度,如下所示: 笔记: 我必须在一个循环中呈现flex div(这是引导警报),一个接一个(因此只有在最后才清楚应用于水平对齐列的宽度) 这是一个简化的例子。实际上,弹性项包含不同的长度 这是在不进行自定义宽度计算的情况下呈现弹性项的方式: 也许有一个“开箱即用”的功能,它以一种不太“粗俗”的方式处

  • 问题内容: 我有一个基于flexbox的布局。两列,一列固定大小,第二列需要占用其余空间。在成长列中,我有一个字符串,希望将其剪切掉。 在Chrome中可以正常运行。但它在Firefox和IE中不起作用。我试图通过使用相对位置和绝对位置来给grow(flex item)内部元素一个宽度来修复它,但是随后我得到了一个损坏的布局。损坏与元素的高度未考虑其所有子元素有关。 注意:flex grow项目内

  • 介绍 (Introduction) UIComponent类是所有可视组件的基类,包括交互式和非交互式。 Class 声明 (Class Declaration) 以下是mx.core.UIComponent类的声明 - public class UIComponent extends FlexSprite implements IAutomationObject, IChild