正文 

当前位置： 首页 > 知识 >

如何阻止 flex 行的第二行出现在页面中间？ [复制]

     2023-03-05     157

关键词：

【中文标题】如何阻止 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>&nbsp<p>Item 2</p><p>Item 1</p>&nbsp<p>Item 2</p><p>Item 3</p>&nbsp<p>Item 4</p><p>Item 5</p>&nbsp<p>Item 6</p><p>Item 7</p>&nbsp<p>Item 8</p><p>Item 9</p>&nbsp<p>Item 10</p><p>Item 11</p>&nbsp<p>Item 12</p><p>Item 13</p>&nbsp<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;

【讨论】：

如何将现有列的第一行填充到第二行的新列中？

】如何将现有列的第一行填充到第二行的新列中？【英文标题】：Howtopopulate1strowofexistingcolumnintonewcolumnof2ndrow?【发布时间】：2012-03-0910:09:52【问题描述】：我有一个生成以下输出的查询：|columnA|-----------|5|-----------|2|-----------|3|---... 查看详情

如何将数据框中每对行的第一行和第二行添加到单独的列表中？

】如何将数据框中每对行的第一行和第二行添加到单独的列表中？【英文标题】：Howtoaddfirstandsecondrowofeachpairofrowsindataframetoseparatelist?【发布时间】：2020-11-1213:26:14【问题描述】：所以我有一个如下所示的数据框：在每对行中，... 查看详情

如何阻止 CSS flex 列填充三列行的宽度？ [复制]

】如何阻止CSSflex列填充三列行的宽度？[复制]【英文标题】：HowtostopCSSflexcolumnfromfillingwidthinthree-columnsrow?[duplicate]【发布时间】：2020-07-2913:24:56【问题描述】：我有一个应该包含三列的flex行。每行三列看起来不错，但是当一行中... 查看详情

BI Publisher Report中如何将Ms.Word表格的第一行和第二行保持在一个页面中？

】BIPublisherReport中如何将Ms.Word表格的第一行和第二行保持在一个页面中？【英文标题】：HowtoKeepFirstRowandSecondRowofMs.WordTableinonepageinBIPublisherReport?【发布时间】：2017-11-2407:38:36【问题描述】：我的机构正在使用BIPublisher（Ms.Word插件... 查看详情

怎么解决之androidstudio的菜单栏和它的第二行的不见了的的问题

1、菜单栏不见了：解决，在键盘上按下“esc”2、菜单栏第二行的不见了解决，按下图操作 查看详情

如何在调整大小时阻止导航栏换行到第二行，比如 FB 导航栏？

】如何在调整大小时阻止导航栏换行到第二行，比如FB导航栏？【英文标题】：Howtostopnavbarfromwrappingtoasecondlinewhenresized,likeFBnavbar?【发布时间】：2018-01-1705:29:57【问题描述】：当屏幕调整/缩小时，我的导航栏重叠/换行到第二行。... 查看详情

我如何从其他页面获取数据表中选中复选框的所有行的第二列

】我如何从其他页面获取数据表中选中复选框的所有行的第二列【英文标题】：Howcanigetthesecondcolumnofallrowsthathaveselectedcheckboxindatatablesevenfromotherpages【发布时间】：2020-03-1608:08:33【问题描述】：我有这张表（从控制器springmvc和thyme... 查看详情

html里如何用表格实现两行两列、第一行的第二列和第二行的第二列是合并的。也就说浏览器里看到的效果是

参考技术A如果你用的是DW，可以用设计器（在它的上边偏右的位置）。选中两个表格。在左下角有单元格的字。字下方左边的是合并单元格。如果找不到。就在第一行第二列里添加rowspan="2"同时把，第二个tr里第二个td删... 查看详情

如何获取 textarea 中第一行和第二行的值？

】如何获取textarea中第一行和第二行的值？【英文标题】：HowcanIgetthevalueofthefirstandsecondlineinatextarea?【发布时间】：2020-12-3014:01:58【问题描述】：我正在尝试从HTML的文本区域中获取第一行和第二行的值。主要问题是第一行和第二... 查看详情

如何访问数据表页脚的第二行

】如何访问数据表页脚的第二行【英文标题】：HowtoaccesstothesecondrowofaDatatablesfooter【发布时间】：2021-12-2216:50:37【问题描述】：我想在我的数据表的页脚添加第二个&lt;tr&gt;以显示总计（在进行一些总和之后）。所有的计算... 查看详情

第二行的css省略号

】第二行的css省略号【英文标题】：cssellipsisonsecondline【发布时间】：2011-07-1306:52:24【问题描述】：CSStext-overflow:ellipsis在第二行，这可能吗？我在网上找不到。示例：我想要的是这样的：Ihopesomeonecouldhelpme.Ineedanellipsisonthesecondline... 查看详情

如何用第二行扩展表格的第一行？

...在寻找一种使用JS或jQuery自动将表格的第一行扩展到第二行的方法。例如，我目前有一个这种格式的表格：<tableid="tbl1"><tr><td>Item1</td><td 查看详情

如何创建带有两行文本且第一行文本大于第二行的 UIButton？

】如何创建带有两行文本且第一行文本大于第二行的UIButton？【英文标题】：HowwouldIcreateaUIButtonwithtwolinesoftextandthefirstlineoftextbeinglargerthanthesecond?【发布时间】：2013-10-2320:40:07【问题描述】：基本上，我想要一个看起来像这样的按... 查看详情

如何选择 SQL Query 的第二行或第三行

】如何选择SQLQuery的第二行或第三行【英文标题】：HowtoselectthesecondorthirdrowofSQLQuery【发布时间】：2019-07-1116:07:21【问题描述】：我有这个问题：SELECTTOP6NoMachine,COUNT(NoMachine)ASCallsFROMDTGROUPBYNoMachineORDERBYCallsDESC;在这6条记录中，我想... 查看详情

python如何读取csv指定内容所在行的第二列内容？

比如有个csv，内容为地区1111地区3222地区2333如何检索到地区3，并提取内容222？因为地区123的顺序会变，不能使用读取第二行内容，望指教，谢谢从执行效率考虑，用pandas库比较好。importpandasaspddf=pd.read_csv('d:/data.csv',delimit... 查看详情

AngularJs 副本：不放在表格的第二行

...很难解决的问题，当我使用angularJS单击按钮时，我不知道如何添加到第二行，它总是在第一行，对不起我的英语。这是我的模板<divclass="col-md-6"style="padding:0px"ng- 查看详情

如果 uilabel 只有一行，则使用 uiLabel 的第二行

...ILabel，并且我指定UILabel可以包含2行。如果文本只有1行，如何指定文本写在第二行，第一行为空？换句话说，我希望文本从下到上写在UILabel中。 查看详情

如何在 UIPickerView 的第一个组件中显示数据，直到第二个组件中特定行的开始？

】如何在UIPickerView的第一个组件中显示数据，直到第二个组件中特定行的开始？【英文标题】：HowtonotdisplaydatainfirstcomponentofUIPickerViewuntilthestartofspecificrowinsecondcomponent?【发布时间】：2017-04-0705:11:20【问题描述】：如果这与以下问... 查看详情