如何阻止 flex 行的第二行出现在页面中间? [复制]
Posted
技术标签:
【中文标题】如何阻止 flex 行的第二行出现在页面中间? [复制]【英文标题】:How do I stop the second line of a flex row from ending up in the middle of a page? [duplicate] 【发布时间】:2021-01-25 02:20:40 【问题描述】:我的代码的#mainArticle 部分包含一个使用行方向的弹性显示。这让我可以并排放置物品,这很棒。但是,当开始新行时,该行从页面中间的中间开始。有没有办法让#mainArticle 中的第二行与该部分的顶部对齐?
body
display: grid;
grid-template-areas:
'header header header'
'nav article ads'
'nav footer footer';
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 1px;
grid-column-gap: 1px;
height: 100vh;
margin: 0;
a
color: #0ad05b;
text-decoration: none;
a:hover
color: #e3eaee;
header
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
footer,
article,
nav,
div
padding: 1.2em;
background: #061621;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
textarea
font-family: Arial, Helvetica, sans-serif;
#pageHeader
grid-area: header;
#pageFooter
grid-area: footer;
#mainArticle
grid-area: article;
display: flex;
flex-wrap: wrap;
flex-direction: row;
#mainNav
grid-area: nav;
#siteAds
grid-area: ads;
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px)
body
grid-template-areas:
'header'
'article'
'ads'
'nav'
'footer';
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
.mainPage
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
.headerRight
grid-area: header;
justify-self: right;
padding: 1.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
.right
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0.5em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
.left
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<div id="mainArticle" class="innerArticle"><p>Item 1</p> <p>Item 2</p><p>Item 1</p> <p>Item 2</p><p>Item 3</p> <p>Item 4</p><p>Item 5</p> <p>Item 6</p><p>Item 7</p> <p>Item 8</p><p>Item 9</p> <p>Item 10</p><p>Item 11</p> <p>Item 12</p><p>Item 13</p> <p>Item 14</p><p>Item 15</p>
</div>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
【问题讨论】:
【参考方案1】:您的#mainArticle
既是网格项目又是弹性容器。要影响元素内部的内容,其容器特性是决定因素。我们正在这里为#mainArticle
寻找弹性容器的设置。
要将 flex 容器中的项目向上对齐,您需要在其上设置 align-content
:
#mainArticle
align-content: flex-start;
【讨论】:
以上是关于如何阻止 flex 行的第二行出现在页面中间? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
pandas筛选dataframe数据:获取dataframe的第二行到第N行的数据
如何在调整大小时阻止导航栏换行到第二行,比如 FB 导航栏?
怎么解决之android studio的菜单栏和它的第二行的不见了的的问题
BI Publisher Report中如何将Ms.Word表格的第一行和第二行保持在一个页面中?