无法让对齐内容在 CSS flexbox 网格中工作

【问题标题】：Cannot get align-content to work in a css flexbox grid无法让对齐内容在 CSS flexbox 网格中工作
【发布时间】：2020-07-21 08:59:56
【问题描述】：

我正在使用 CSS flexbox 制作一个在页面调整大小时换行的项目网格。我希望网格水平居中，这要归功于justify-content: center;。问题是最后一个框（在某些情况下）居中而不是左对齐。如何使它与左侧对齐？

我尝试在容器上使用align-content: flex-start;，但它似乎不起作用，我不知道为什么。

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@-ms-viewport {width: device-width;}

.flex-container {
  max-width: 100%;
  margin: 0 auto;
  background-color: whitesmoke;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: center;
  align-content: flex-start;
}

.flex-item {
  width: 300px;
  position: relative;
  box-sizing: border-box;
  border: dashed 1px navy;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  padding: 1em;
}

.flex-item .flex-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: crimson;
}

.flex-item a.flex-permalink {
  text-decoration: none;
  color: black;
  display: block;
  background-color: lightpink;
  height: 100%;
}

.flex-item img { width: 100%;}

.flex-item h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  margin: 0;
  padding: 1em;
}
<div class="flex-container">
	<div class="flex-row">
		<!-- ------ Let the loop begin ------ -->
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Exercitation cupidatat ex non aliqua dolore veniam veniam officia ex dolore.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Sint eiusmod est laborum reprehenderit.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Adipisicing quis tempor duis irure magna quis occaecat.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Culpa dolore sint sit non voluptate nostrud nulla dolor laborum.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Tempor consectetur do elit magna sunt cillum dolor.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>AEu eiusmod qui nostrud anim nulla dolore non veniam excepteur adipisicing sed.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Lorem ipsum duis non laboris</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Dolor occaecat laboris enim duis eiusmod</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Exercitation do enim sint pariatur consectetur</h1>
				</a>
			</div>
		</div>
		<!-- ------ Let the loop end ------ -->
	</div>
</div>

编辑：

【问题讨论】：

  • justify-content: center; 将使行中的项目居中。如果你想将它们向左对齐，你必须使用justify-content: flex-start;
  • 是的，我确实想将框向左对齐并将整个网格居中，但无论我将justify-content 设置为什么，它都不会改变任何东西。
  • 也许这有助于stackoverflow.com/questions/32802202/…

标签： html css flexbox


【解决方案1】：

而不是 justify-content:center;使用 justify-content:flex-start 或 space-between 或 space-evenly

如果您希望整个事物以 x 轴为中心，请在外部容器上使用 margin:0 auto

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@-ms-viewport {width: device-width;}

.flex-container {
  max-width: 100%;
  margin: 0 auto;
  background-color: whitesmoke;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: flex-start;
  align-content: flex-start;
}

.flex-item {
  width: 300px;
  position: relative;
  box-sizing: border-box;
  border: dashed 1px navy;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  padding: 1em;
}

.flex-item .flex-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: crimson;
}

.flex-item a.flex-permalink {
  text-decoration: none;
  color: black;
  display: block;
  background-color: lightpink;
  height: 100%;
}

.flex-item img { width: 100%;}

.flex-item h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  margin: 0;
  padding: 1em;
}
<div class="flex-container">
	<div class="flex-row">
		<!-- ------ Let the loop begin ------ -->
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Exercitation cupidatat ex non aliqua dolore veniam veniam officia ex dolore.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Sint eiusmod est laborum reprehenderit.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Adipisicing quis tempor duis irure magna quis occaecat.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Culpa dolore sint sit non voluptate nostrud nulla dolor laborum.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Tempor consectetur do elit magna sunt cillum dolor.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>AEu eiusmod qui nostrud anim nulla dolore non veniam excepteur adipisicing sed.</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Lorem ipsum duis non laboris</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Dolor occaecat laboris enim duis eiusmod</h1>
				</a>
			</div>
		</div>
		<div class="flex-item">
			<div class="flex-wrapper">
				<a class="flex-permalink" href="">
					<img src="SVG_fallback_image.svg" alt="">
					<h1>Exercitation do enim sint pariatur consectetur</h1>
				</a>
			</div>
		</div>
		<!-- ------ Let the loop end ------ -->
	</div>
</div>

【讨论】：

  • 是的，这就是我想要的，整个网格以 x 轴为中心，我已经尝试过 margin: 0 auto;，但它不起作用。您的示例也没有使整个网格居中。
【解决方案2】：

在您的 CSS 中，您可以指定最后一个子元素向左对齐；在你的风格中添加这个：

.flex-row>*:last-child{
   margin-right: auto;
}

剩下要做的就是调整空间。

【讨论】：

  • 如果最后一行有多个孩子怎么办？
【解决方案3】：

flexbox 的问题在于它不是一个真正的网格，它依赖于包装，这会留下不需要的空白，希望可能有一个足够小的 flex 项以容纳其中，因此容器不会缩小。

此外，由于 flexbox 没有建立真正的网格，因此无法定位最后一行。

不过，这可以在 CSS 网格中轻松完成。

使用

grid-template-columns:repeat(auto-fit,300px);

我们告诉网格创建大小为300px的列在.flex-item中定义的宽度 仅当它可以且仅当由于auto-fit 有更多元素可以放入创建的列中时@

.flex-container {
  max-width: 100%;
  margin: 0 auto;
  background-color: whitesmoke;
}

.flex-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  overflow: hidden;
  justify-content: center;
}

.flex-item {
  width: 300px;
  position: relative;
  box-sizing: border-box;
  border: dashed 1px navy;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  padding: 1em;
}

.flex-item .flex-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: crimson;
}

.flex-item a.flex-permalink {
  text-decoration: none;
  color: black;
  display: block;
  background-color: lightpink;
  height: 100%;
}

.flex-item img {
  width: 100%;
}

.flex-item h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  margin: 0;
  padding: 1em;
}
<div class="flex-container">
  <div class="flex-row">
    <!-- ------ Let the loop begin ------ -->
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>Exercitation cupidatat ex non aliqua dolore veniam veniam officia ex dolore.</h1>
        </a>
      </div>
    </div>
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>Sint eiusmod est laborum reprehenderit.</h1>
        </a>
      </div>
    </div>
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>Adipisicing quis tempor duis irure magna quis occaecat.</h1>
        </a>
      </div>
    </div>
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>Culpa dolore sint sit non voluptate nostrud nulla dolor laborum.</h1>
        </a>
      </div>
    </div>
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>Tempor consectetur do elit magna sunt cillum dolor.</h1>
        </a>
      </div>
    </div>
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>AEu eiusmod qui nostrud anim nulla dolore non veniam excepteur adipisicing sed.</h1>
        </a>
      </div>
    </div>
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>Lorem ipsum duis non laboris</h1>
        </a>
      </div>
    </div>
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>Dolor occaecat laboris enim duis eiusmod</h1>
        </a>
      </div>
    </div>
    <div class="flex-item">
      <div class="flex-wrapper">
        <a class="flex-permalink" href="">
          <img src="SVG_fallback_image.svg" alt="">
          <h1>Exercitation do enim sint pariatur consectetur</h1>
        </a>
      </div>
    </div>
    <!-- ------ Let the loop end ------ -->
  </div>
</div>

【讨论】：

    猜你喜欢
    • 2020-01-28
    • 2020-11-23
    • 1970-01-01
    • 2022-08-09
    • 2020-05-12
    • 1970-01-01
    • 1970-01-01
    • 2019-07-06
    • 2014-02-08
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode