CSS图像flexbox边距
你好，我正在尝试使用flex均匀地分配额外的可用宽度的div框之间的图像之间的边距。我试过使用弹性基础：30%；然而，它不是均匀地分配图像的边距，而是将图像垂直地堆叠在彼此的顶部。
null
.images-container{
max-width: 1400px;
margin: 40px auto 0 auto;
display: flex;
background: #595959;
justify-content: space-between;
}
.images{
/* flex-basis: 30%; <- Issue */
} <!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="images-container">
<div class="images">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Maths">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="ComputerScience">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Physics">
</div>
</div>
</body>null
共有2个答案
您的flex-container.images-container只有一个子元素，即.imagesdiv。
如果希望flex影响图像本身，则必须将display:flex应用于.images，而不是应用于.images-container。
justify-content:space-between所做的正是您要做的。它在您的代码中不起作用，因为您在图像周围放了另一个div。如果您删除div“images”，它会起作用：
null
.images-container{
max-width: 1400px;
margin: 40px auto 0 auto;
display: flex;
background: #595959;
justify-content: space-between;
}
.images{
} <!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="images-container">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Maths">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="ComputerScience">
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="Physics">
</div>
</body>-
我试图创建一个包含两个项目的flex容器--一个文本div和一个图像div。 然而，我在容器中保存映像时遇到了实际的问题。当我将浏览器的大小调整为一个小宽度时，图像就会溢出容器，我似乎不明白为什么会发生这种情况。物品应该留在容器里吗？ 代码在这里： 代码本在这里： http://codepen.io/reskk/pen/aldpbz 我四处寻找并尝试了一些解决方案：使用flex-basis、fle
-
此页http://wildlife.x-tremeteam.com利用CSS边框图像属性和。带有透明边缘的png图像，可在我的div上创建“撕裂的纸张”外观。除了在我的Android（三星SIII）上，无论我使用的是它的默认浏览器还是Chrome应用程序，它都工作得很好。在这一点上，我可以看到在20px边界的内部和外部都有一个轻微的边缘。有趣的是，我看不到角落的边缘。带边框的div的背景是透明的。
-
Flexbox CSS Css3-flexbox Flexbox——快速布局神器 一个完整的Flexbox指南 CSS3 Flexbox属性可视化指南 Autoprefixer 布局问题 Flexbox属性图 从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成，容器即父元素，项目即子元素。他们之间的一些关系可以这样来表示： Flex容器 容器默认存在两根轴：水平的主轴（main
-
主要内容：1. border-image-source,2. border-image-slice,3. border-image-width,4. border-image-outset,5. border-image-repeat,6. border-image对于元素的边框我们除了可以使用《 CSS 边框》一节中介绍的一些默认样式外，还可以通过 CSS3 中的 border-image 属性使用图像来作为元素的边框，以创建出丰富多彩边框效果。 border-image 属性可以通过一些简单
-
我试着让两个div相邻，它们之间有一个对角线空间。我在stackoverflow上看到过多个关于对角线div的教程，但它们都是通过为带有纯色的div使用两个边框并使用它们创建的对角线来实现的。但我想要图片/背景图像，而不是纯色。甚至可能还有其他内容，比如在对角线下的文本。当使用边框时，这是不可能的，因为边框在div之外。（floatright隐藏溢出或其他内容。） 这里有人能给我一个提示如何实现这
-
为了实现丰富多彩的边框效果，在CSS3中，新增了 border-image属性，这个新属性允许指定一幅图像作为元素的边框。该属性的优点是，可以根据一些简单的规则，把一幅图像划分为 9 个单独的部分，浏览器会自动使用合适的部分作为边框的对应部分。 需要注意的是，只有当 border-style属性取值为 none 时，border-image属性才会有效。所以，如果定义的边框图像显示不出来，首先需要