相关疑难解决方法(0)
以CSS网格为中心
我正在尝试使用CSS Grid创建一个简单的页面.
我没有做的是将文本从HTML中心放到相应的网格单元格中.
我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg
我该怎么做呢？
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 0px 0px;
}
.left_bg {
display: subgrid;
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
}
.right_bg {
display: subgrid;
background-color: #ecf0f1;
grid-column: 2 / 2;
grid_row: 1 / 1;
z-index: 0;
}
.left_text {
grid-column: 1 / 1;
grid-row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center; …推荐指数
解决办法
查看次数
flex-wrap如何使用align-self,align-items和align-content？
align-self
在以下代码中,align-self使用flex-wrap: nowrap.
flex-container {
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:last-child {
align-self: flex-end;
background-color: crimson;
}<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>但是当容器切换到时flex-wrap: wrap,align-self属性会失败.
flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: …推荐指数
解决办法
查看次数
如何将CSS Grid中最后一行的元素居中？
我正在使用CSS网格来布局这样的项目......
#container {
display: grid;
grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.item {
background: teal;
color: white;
padding: 20px;
margin: 10px;
}<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>如何让最后一行居中而不是左对齐？我不能保证项目的数量,所以想要使布局看起来适合任意数量的项目.
这是我应该使用flexbox吗？或者CSS网格是否合适？
推荐指数
解决办法
查看次数
当项目数少于列数时居中 CSS 网格
假设我有一个简单的网格，它将项目放在 4 列中，填充整个容器宽度：
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
justify-content: center;
}
.item {
height: 100px;
background-color: red;
}<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>这非常有效，直到我有 3 个或更少的项目。它们被放入相应的单元格中，但由于右侧的单元格是空的，因此在视觉上网格开始看起来“左对齐”。如果容器本身位于页面的中心，这并不酷。
当网格有 3 个或更少的项目时，如何使网格居中？我尝试使用repeat(auto-fit, 25%)但它没有考虑grid-gap到。repeat(auto-fit, minmax(25%, 1fr))拉伸内容而不是居中。
推荐指数
解决办法
查看次数
CSS 网格列拉伸以填充整行/或居中行？
我有一个基本的网格设置如下：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
grid-gap: 1rem;
}
当网格自动分成新行时，我要么希望新行上的元素占据一定比例的空间，要么居中以便它们看起来不错。
例如，如果我在一行中有 3 个元素，那么我希望每个元素占用 33% 的容器空间。但是，当网格中断并且新行上只有 1 个元素时，我希望该元素占据行宽的 100%，或者至少看起来居中——这与将元素全部放置在中间的默认行为相反。向左移动，仅占用 1fr 的空间。
同样，如果新行中有 2 个元素，则每个元素应占据行空间的 50%，或者两个元素一起看起来应居中。
我不知道总共会有多少个元素。理想情况下，该解决方案应适用于最少 1 个到任意数量的元素。
如果有人有任何想法，请告诉我。谢谢。
推荐指数
解决办法
查看次数
CSS 网格中的中心行
我正在创建一个 4x3 网格布局，并希望第二行居中，因为顶行有四个元素。
像这样的东西：
演示代码：
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50% 50%;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>推荐指数
解决办法
查看次数
CSS 滚动捕捉不适用于 CSS 网格
当将 CSS 滚动捕捉与 Flexbox 结合使用时，捕捉效果很好：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slider {
font-family: sans-serif;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vw);
scroll-snap-type: x mandatory;
display: flex;
overflow-x: scroll;
}
section {
border-right: 1px solid white;
padding: 1rem;
min-width: 100vw;
height: 100vh;
scroll-snap-align: start;
text-align: center;
position: relative;
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: red;
width: 100%;
left: 0;
font-size: calc(1rem + 3vw);
}<div class="slider">
<section>
<h1>Section One</h1>
</section>
<section>
<h1>Section Two</h1>
</section> …推荐指数
解决办法
查看次数
将包装物品放在网格的中心
我有一个CSS 网格布局，如下所示：
这对我来说非常有效，但是当我降低屏幕分辨率时，网格的响应能力使网格看起来像这样：
相反，我希望包装项目能够对齐左右空白，它们应该如下所示：
我怎样才能实现上述目标？这些项目在数量上是动态的。可以有偶数个项目，这将使它看起来更好，因为左右空白将等距。但是，如果项目的数量是奇数，则空格仍应均匀分布。我尝试使用grid-auto-flowand align-items，但它们似乎没有帮助。
.accordioninnergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.innerbox {
display: flex;
border: 1px solid black;
flex-direction: column;
align-items: center;
word-wrap: break-word;
width: auto;
}
.innerbox>p,
img {
margin: 1%;
}<div class="accordioninnergrid">
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p> …推荐指数
解决办法
查看次数
如何在使用 CSS 网格自动调整属性时完美居中网格项目？
我有这个网格：
问题是，由于auto-fit属性的原因，当更改屏幕尺寸时，某些列会下降。我需要即使出现新行，所有网格项也应该在网格容器中居中。
这是场景：
body {margin: 0}
.about-us__block {
width: 150px;
height: 200px;
background: yellow;
}
.about-us__container {
background: black;
padding: 20px 0;
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 10px;
}
.about-us__text {
padding: 5px;
text-align: center;
background-color: #35306B;
color: #ebecec;
}
.about-us__text h6 {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
.about-us__text p {
font-family: Helvetica;
margin: 0;
}
.about-us__item:nth-of-type(4) {
grid-column: 2;
}<div class="about-us__container">
<div class="about-us__item">
<div class="about-us__block"></div>
<div …推荐指数
解决办法
查看次数
使用Grid很难或不可能实现Flexbox涵盖的哪些领域？
突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是
但是您也可能会争辩说，像这样的纯一维布局在Flexbox中更强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。
我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况（即没有高级CSS 技巧或很多代码）。
以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。
Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？
编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）
推荐指数
解决办法
查看次数