我遇到了一个问题，我需要一个div .footnote来捕捉到其父级的底部。我正在使用flexbox，我将在父元素中包含可变数量和大小的元素，因此我不能使用绝对定位或填充。
我已经尝试了align-self: flex-end，但这没有效果。我不确定我做错了什么;我正在阅读的所有内容都让我相信应该完全按照我的意愿去做。
html {
color: #000;
background: #FFF
}
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, input,
button, textarea, select,
p, blockquote, th, td {
margin: 0;
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
fieldset,
img {
border: 0
}
address, button, caption, cite,
code, dfn, em, input, optgroup,
option, select, strong, textarea,
th, var {
font: inherit
}
del,
ins {
text-decoration: none
}
li {
list-style: none
}
caption,
th {
text-align: left
}
h1, h2, h3,
h4, h5, h6 {
font-size: 100%;
font-weight: normal
}
q:before,
q:after {
content: ''
}
abbr,
acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: baseline
}
sub {
vertical-align: baseline
}
legend {
color: #000
}
*,
::after,
::before {
box-sizing: border-box
}
html {
background-color: #ccc;
padding: 2%;
font: 12pt bahnschrift;
}
article {
display: flex;
align-content: flex-start;
flex-flow: row wrap;
width: 8.5in;
height: 11in;
/*
width:45pc;
height:60pc;
*/
/*
width:794px;
height:1122px;
*/
padding: 13mm;
background-color: #fff;
margin-bottom: 2%;
}
h1 {
text-align: center;
font-size: 36pt;
height: 5pc;
flex: 2 0 45pc;
align-self: center;
order: 1;
}
figure {
flex: 1 50%;
display: grid;
grid-template-columns: [logo] 10pc [data] auto;
grid-template-rows: [title-start] 3pc [title-end item1-start] auto [item1-end item2-start] auto [item2-end item3-start] auto [item3-end item4-start] auto;
height: 10pc;
order: 2;
margin: 0;
padding: 0;
border-bottom: 1px solid #000;
}
figure:nth-last-child(-n+3) {
border-bottom: none;
}
ul {
grid-column-start: data;
grid-row-start: item1-start;
grid-row-end: item4-end;
padding-left: 5.2pc;
}
li {
padding: 0.1pc 0 0.1pc 1.7pc;
height: 1.7pc;
vertical-align: middle
}
.footnote {
align-self: flex-end;
padding-top: 3pc;
flex: 2 100%;
font-size: 17pt;
order: 3;
text-align: center;
}
.logo {
width: 10pc;
height: 10pc
}
.game {
display: flex;
font-size: 15pt;
padding-left: .5pc;
align-items: center
}
.E {
background: url('SVG/ESRB_E.svg') no-repeat;
background-size: 5pc 7pc;
}
.E10 {
background: url('SVG/ESRB_E10.svg') no-repeat;
background-size: 5pc 7pc;
}
.T {
background: url('SVG/ESRB_T.svg') no-repeat;
background-size: 5pc 7pc;
}
.M {
background: url('SVG/ESRB_M.svg') no-repeat;
background-size: 5pc 7pc;
}
.RP {
background: url('SVG/ESRB_RP.svg') no-repeat;
background-size: 5pc 7pc;
}
.ctrl {
background: url('SVG/dualshock_256.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.phone {
background: url('SVG/phone.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
}
.psvr {
background: url('SVG/PSVR_256.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.move {
background: url('SVG/move_256.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.online {
background: url('SVG/globe.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.story {
background: url('SVG/story.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.disc {
background: url('SVG/disc.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.download {
background: url('SVG/download.svg') no-repeat;
background-size: 1.5pc 1.5pc;
font-size: 11pt;
}
@media print {
html {
padding: 0;
background: none;
}
article {
margin-bottom: 0;
}
}<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>PS4 Adult Card Games List</title>
<link rel="stylesheet" type="text/css" media="all" href="reset-min.css">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>
<article id="adultPS4">
<h1>PS4 Adult Card Games List</h1>
<figure>
<img class="logo" src="icons/fortnite.png" />
<p class="game">Fortnite: Battle Royale</p>
<ul class="T">
<li class="ctrl">1 Player</li>
<li class="online">Online Only</li>
<li class="download">Digital Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/jackbox.png" />
<p class="game">Jackbox Party Pack</p>
<ul class="T">
<li class="phone">2-8 Player</li>
<li class="online">Online Play</li>
<li class="disc">Disc Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/bloodborne.jpg" />
<p class="game">Bloodborne</p>
<ul class="M">
<li class="ctrl">1 Player</li>
<li class="online">Online Play</li>
<li class="story">Story Mode</li>
<li class="download">Digital Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/codblops.jpg" />
<p class="game">Call of Duty: Black Ops 3</p>
<ul class="M">
<li class="ctrl">1-2 Player</li>
<li class="online">Online Play</li>
<li class="story">Story Mode</li>
<li class="disc">Disc Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/claire.jpg" />
<p class="game">Claire: Extended Cut</p>
<ul class="E">
<li class="ctrl">1 Player</li>
<li class="story">Story Mode</li>
<li class="download">Digital Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/madmax.jpg" />
<p class="game">Mad Max</p>
<ul class="E">
<li class="ctrl">1 Player</li>
<li class="story">Story Mode</li>
<li class="download">Digital Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/mkxl.jpg" />
<p class="game">Mortal Kombat XL</p>
<ul class="E10">
<li class="ctrl">1-2 Player</li>
<li class="online">Online Play</li>
<li class="story">Story Mode</li>
<li class="download">Digital Game</li>
</ul>
</figure>
<p class="footnote">Other titles can be brought from home or checked out from the Library</p>
</article>
</body>
</html>
答案 0 :(得分：0)
好吧，我让它工作，而不是最好的解决方案，但它正在发挥作用。
我最终给页面赋予了flex所在的包装，然后脚注作为绝对定位元素存在于包装器之外。
html {
color: #000;
background: #FFF
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
select,
p,
blockquote,
th,
td {
margin: 0;
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
fieldset,
img {
border: 0
}
address,
button,
caption,
cite,
code,
dfn,
em,
input,
optgroup,
option,
select,
strong,
textarea,
th,
var {
font: inherit
}
del,
ins {
text-decoration: none
}
li {
list-style: none
}
caption,
th {
text-align: left
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal
}
q:before,
q:after {
content: ''
}
abbr,
acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: baseline
}
sub {
vertical-align: baseline
}
legend {
color: #000
}
*,
::after,
::before {
box-sizing: border-box
}
html {
background-color: #ccc;
padding: 2%;
font: 12pt bahnschrift;
}
article {
position: relative;
width: 8.5in;
height: 11in;
/*
width:45pc;
height:60pc;
*/
/*
width:794px;
height:1122px;
*/
padding: 13mm;
background-color: #fff;
margin-bottom: 2%;
}
.flexwrapper {
display: flex;
align-content: flex-start;
flex-flow: row wrap;
}
h1 {
text-align: center;
font-size: 36pt;
height: 5pc;
flex: 2 0 45pc;
align-self: center;
order: 1;
}
figure {
flex: 1 50%;
display: grid;
grid-template-columns: [logo] 10pc [data] auto;
grid-template-rows: [title-start] 3pc [title-end item1-start] auto [item1-end item2-start] auto [item2-end item3-start] auto [item3-end item4-start] auto;
height: 10pc;
order: 2;
margin: 0;
padding: 0;
border-bottom: 1px solid #000;
}
figure:nth-last-child(-n+3) {
border-bottom: none;
}
ul {
grid-column-start: data;
grid-row-start: item1-start;
grid-row-end: item4-end;
padding-left: 5.2pc;
}
li {
padding: 0.1pc 0 0.1pc 1.7pc;
height: 1.7pc;
vertical-align: middle
}
.footnote {
position: absolute;
bottom: 3pc;
padding-top: 3pc;
flex: 2 100%;
font-size: 17pt;
order: 3;
text-align: center;
}
.logo {
width: 10pc;
height: 10pc
}
.game {
display: flex;
font-size: 15pt;
padding-left: .5pc;
align-items: center
}
.E {
background: url('SVG/ESRB_E.svg') no-repeat;
background-size: 5pc 7pc;
}
.E10 {
background: url('SVG/ESRB_E10.svg') no-repeat;
background-size: 5pc 7pc;
}
.T {
background: url('SVG/ESRB_T.svg') no-repeat;
background-size: 5pc 7pc;
}
.M {
background: url('SVG/ESRB_M.svg') no-repeat;
background-size: 5pc 7pc;
}
.RP {
background: url('SVG/ESRB_RP.svg') no-repeat;
background-size: 5pc 7pc;
}
.ctrl {
background: url('SVG/dualshock_256.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.l {
font-size: 11pt;
padding-top: 0.2pc;
}
.xl {
font-size: 9pt;
padding-top: 0.4pc;
}
.phone {
background: url('SVG/phone.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
}
.psvr {
background: url('SVG/PSVR_256.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.move {
background: url('SVG/move_256.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.online {
background: url('SVG/globe.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.story {
background: url('SVG/story.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.disc {
background: url('SVG/disc.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
.download {
background: url('SVG/download.svg') no-repeat;
background-size: 1.5pc 1.5pc;
}
@media print {
html {
padding: 0;
background: none;
}
article {
margin-bottom: 0;
}
}<article id="adultPS4" class="page">
<div class="flexwrapper">
<h1>PS4 Adult Card Games List</h1>
<figure>
<img class="logo" src="icons/fortnite.png" />
<p class="game">Fortnite: Battle Royale</p>
<ul class="T">
<li class="ctrl">1 Player</li>
<li class="online">Online Only</li>
<li class="download l">Digital Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/jackbox.png" />
<p class="game">Jackbox Party Pack</p>
<ul class="T">
<li class="phone">2-8 Player</li>
<li class="online">Online Play</li>
<li class="disc">Disc Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/bloodborne.jpg" />
<p class="game">Bloodborne</p>
<ul class="M">
<li class="ctrl">1 Player</li>
<li class="online">Online Play</li>
<li class="story">Story Mode</li>
<li class="download l">Digital Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/codblops.jpg" />
<p class="game">Call of Duty: Black Ops 3</p>
<ul class="M">
<li class="ctrl">1-2 Player</li>
<li class="online">Online Play</li>
<li class="story">Story Mode</li>
<li class="disc">Disc Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/claire.jpg" />
<p class="game">Claire: Extended Cut</p>
<ul class="E">
<li class="ctrl">1 Player</li>
<li class="story">Story Mode</li>
<li class="download l">Digital Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/madmax.jpg" />
<p class="game">Mad Max</p>
<ul class="E">
<li class="ctrl">1 Player</li>
<li class="story">Story Mode</li>
<li class="download l">Digital Game</li>
</ul>
</figure>
<figure>
<img class="logo" src="icons/mkxl.jpg" />
<p class="game">Mortal Kombat XL</p>
<ul class="E10">
<li class="ctrl">1-2 Player</li>
<li class="online">Online Play</li>
<li class="story">Story Mode</li>
<li class="download l">Digital Game</li>
</ul>
</figure>
</div>
<p class="footnote">Other titles can be brought from home or checked out from the Library</p>
</article>