个人中心
gpt4 book ai didi

css - 具有多列和多行的 Flexbox 响应式布局 : Best practice to realize a "column-gap"?

转载 作者：太空宇宙 更新时间：2023-11-04 06:19:48 24 4
gpt4 key购买 nike

我的任务的完美解决方案是属性 column-gap，但它还没有广泛支持 flexboxes。

所以我需要一个 hack 来即兴发挥这个功能。

最好的做法是什么？

我的愿望是使用justify-content: space-between;。

这意味着例如对于一行中的 4 个对象:第一个对象没有左边距，行中的最后一个对象没有右边距。当然，对象之间应该有一个最小的水平间隙。

这意味着对于一行中的 1 个对象(小显示器):也没有左边距和右边距。

我尝试结合使用 margin、padding 和像 last-child 这样的伪类。但结果是，当显示太小以至于只能显示一列时，您必须重新设置所有这些规则。

最少的代码

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

div {
  flex: 1;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

我正在寻找解决问题的优雅方法。您必须使用宽度的媒体查询重置许多规则，其中只有一个对象适合一行。

感谢您的帮助。

最佳答案

我想我明白你想要什么，但你为什么特别想使用 justify-content: space-between ？

实现你想要的最简单的方法是在父 flex 容器和 margin-left: 1em 和margin-bottom: 1em 在 flex 子元素上。 flex 子元素的 margin-left 值必须与 flex 容器的负 margin-left 值相同。

* {
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  margin: 0;
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1em;
}

.flex-item {
    flex: 1;
    background: #ccc;
    border-radius: 3px;
    text-align: center;
    padding: 1em;
    margin-left: 1em;
    margin-bottom: 1em;
}
<div class="flex-container">
  <div class="flex-item">Lorem ipsum dolor sit amet lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum dolor sit amet lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum dolor sit amet lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum dolor sit amet lorem ipsum dolor</div>
</div>

如果您愿意，您也可以为子级设置 min-width。

根据您的评论并查看您的设计，我发现了一些错误。您会在下面找到一个代码片段，它向您展示了实现设计的正确方法。

一些建议:

  • 避免使用 id (#)，因为它们过于具体且难以覆盖。支持类和属性选择器。
  • 将您的盒子模型设置为 box-sizing: border-box，它使处理边距、填充和计算布局变得更加容易(请参阅 Marie Mosley 关于盒子大小的 article 以了解更多信息解释)
  • 如果您在容器上使用负 margin，请不要给它背景颜色或边框，因为这会破坏您的布局(这就是您给 #vorschau 时发生的情况 负边距和背景)。在父容器上设置背景、边框等。

* {
    box-sizing: border-box;
}

body {
    background: rgb(220, 220, 220);
    font-family: Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
}

h1, p {
  margin: 0;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.seite {
    margin: 0 auto;
    max-width: 70em;
    background: #FAF2D5;
}

.huelle {
    padding: 1.5em 2em;
}

.vorschau-container {
    background: white;
    border: 1px solid gray;
    margin: 1em 0;
}

.vorschau {
    margin-left: -2em;
    margin-bottom: -2em;
}

.vorschau figure {
    margin: 0 0 2em 2em;
    text-align: center;
}

.vorschau img {
    max-width: 14.5em;
    border: 0.6em solid rgb(231, 231, 231);
}
<body class="galerie" cz-shortcut-listen="true">
	<div class="seite">
		<div class="huelle">
			<h1>Lorem Ipsum</h1>
			<div class="vorschau-container">
				<div class="vorschau flex-container">
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Aufenthalt "Süd"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Bad "2. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Doppelzimmer</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Eingangsbereich</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Aufenthalt "1. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Küche "2. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Küche "1. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Aufenthalt "2. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Bad "1. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Bad "1. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Bad "1. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Bad "1. Quer"</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Seminarwhg./Teeküche</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Seminarwhg./Lounge</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Seminarraum</figcaption>
					</figure>
					<figure>
						<a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
						<figcaption>Seminarwhg./Zimmer</figcaption>
					</figure>
				</div>
			</div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula orci vitae felis congue porta. Maecenas finibus fermentum erat. Aenean pulvinar consequat arcu, ut pulvinar diam scelerisque non. Duis dapibus, mi nec pulvinar egestas, risus justo vehicula neque, in vestibulum turpis urna nec lacus.</p>
		</div>
	</div>
</body>

如果您需要进一步的解释，请在评论中提问；)

关于css - 具有多列和多行的 Flexbox 响应式布局 : Best practice to realize a "column-gap"?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55606496/

24 4 0
文章推荐： python - 如何将 Pandas 时间序列重新采样/对齐到最近的日历季度？
文章推荐： c - C 中索引 0 处的数组值在循环结束时发生变化
文章推荐： java - 如何更改 java JMenuItem (ctrl+s) 内快捷方式文本的颜色/字体
文章推荐： python - 从 ZMQ 子队列获取特定消息
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com