3

I'm running into an issue where I need a div, .footnote, to snap to the bottom to its parent. I'm using flexbox, and I will have a variable number and size of elements inside the parent element, so I can't use absolute positioning or padding.

I've tried align-self: flex-end, but that has no effect. I'm not sure what I'm doing wrong; everything I'm reading leads me to believe that should do exactly what I want it to do.

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sam
  • 65
  • 8
  • oh, and since I forgot to mention it in the post, the element I'm needing to be at flex-end is .footnote The reason I can't use padding is because I have multiple layouts that need to fit into the same area and some take up more space, and the people entering the data have no idea how to change CSS. – Sam Apr 13 '18 at 17:14
  • I think it is the `align-content:flex-start` on `article`. – deEr. Apr 13 '18 at 17:18
  • When I don't have align-content:flex-start there it spreads the content out weirdly. I want everything at the flex start except that item. – Sam Apr 13 '18 at 17:54
  • The short answer here is that your use of `align-content` is screwing you. Normally you'd do a `margin-top: auto` on `.footnote` and call it a day. But if you get rid of `align-content`, then you run into other problems with the grid items, and problems start compounding. I think you need to look at redoing your `figures` as not a grid display. Perhaps doing them as `display: flex; flex-flow: column-wrap` would be a good start. See https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items about `align-content`. – cjl750 Apr 13 '18 at 18:09
  • @cjl750: I don't know if some of the things i'm doing with css grid I can duplicate with css flex since flex is so 1 dimensional. I tried the switch and my ESRB logos disappear, elements are stretching out of whack and like you said compounds problems. it's weird that align-content even effects the grid items since they're two seprate css systems. – Sam Apr 13 '18 at 18:43
  • `align-content` affects your grid items because they are the direct descendants of an element with `display: flex`. Maybe you have more going on than what we can see in the preview in your question, but the layout in the snippet in your question can definitely be done with flexbox. If items are stretching strangely, `flex-grow` and `flex-shrink` (which are included in the `flex` shorthand property) are probably to blame. – cjl750 Apr 13 '18 at 18:48

1 Answers1

0

Alright, I got it working, not the best solution, but it's working.

I ended up giving the pages a wrapper that the flex lives in, and then the footnote lives outside that wrapper as an absolute positioned element.

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>
Sam
  • 65
  • 8