align-self：flex-end 在 Flexbox 中不起作用

2024-03-13

我正在使用“milligram.css”（一个微型 CSS 框架 https://milligram.github.io/#grids).

我想将列内的 DIV 与底部对齐。

但没有任何反应，DIV 始终顶部对齐。

https://jsfiddle.net/fb8ydfcy/3/ https://jsfiddle.net/fb8ydfcy/3/

.column {
  border: 1px solid red;
}

.col-bottom {
  border: 3px solid blue;
}


/*!
 * Milligram v1.1.0
 * http://milligram.github.io
 *
 * Copyright (c) 2016 CJ Patoilo
 * Licensed under the MIT license
*/

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  color: #606c76;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

blockquote {
  border-left: 0.3rem solid #d1d1d1;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
}

blockquote *:last-child {
  margin: 0;
}

.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background-color: #9b4dca;
  border: 0.1rem solid #9b4dca;
  border-radius: 0.4rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  height: 3.8rem;
  letter-spacing: 0.1rem;
  line-height: 3.8rem;
  padding: 0 3rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.button:hover,
.button:focus,
button:hover,
button:focus,
input[type='button']:hover,
input[type='button']:focus,
input[type='reset']:hover,
input[type='reset']:focus,
input[type='submit']:hover,
input[type='submit']:focus {
  background-color: #606c76;
  border-color: #606c76;
  color: #fff;
  outline: 0;
}

.button.button-disabled,
.button[disabled],
button.button-disabled,
button[disabled],
input[type='button'].button-disabled,
input[type='button'][disabled],
input[type='reset'].button-disabled,
input[type='reset'][disabled],
input[type='submit'].button-disabled,
input[type='submit'][disabled] {
  opacity: 0.5;
  cursor: default;
}

.button.button-disabled:hover,
.button.button-disabled:focus,
.button[disabled]:hover,
.button[disabled]:focus,
button.button-disabled:hover,
button.button-disabled:focus,
button[disabled]:hover,
button[disabled]:focus,
input[type='button'].button-disabled:hover,
input[type='button'].button-disabled:focus,
input[type='button'][disabled]:hover,
input[type='button'][disabled]:focus,
input[type='reset'].button-disabled:hover,
input[type='reset'].button-disabled:focus,
input[type='reset'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='submit'].button-disabled:hover,
input[type='submit'].button-disabled:focus,
input[type='submit'][disabled]:hover,
input[type='submit'][disabled]:focus {
  background-color: #9b4dca;
  border-color: #9b4dca;
}

.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
  color: #9b4dca;
  background-color: transparent;
}

.button.button-outline:hover,
.button.button-outline:focus,
button.button-outline:hover,
button.button-outline:focus,
input[type='button'].button-outline:hover,
input[type='button'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='submit'].button-outline:hover,
input[type='submit'].button-outline:focus {
  color: #606c76;
  background-color: transparent;
  border-color: #606c76;
}

.button.button-outline.button-disabled:hover,
.button.button-outline.button-disabled:focus,
.button.button-outline[disabled]:hover,
.button.button-outline[disabled]:focus,
button.button-outline.button-disabled:hover,
button.button-outline.button-disabled:focus,
button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
input[type='button'].button-outline.button-disabled:hover,
input[type='button'].button-outline.button-disabled:focus,
input[type='button'].button-outline[disabled]:hover,
input[type='button'].button-outline[disabled]:focus,
input[type='reset'].button-outline.button-disabled:hover,
input[type='reset'].button-outline.button-disabled:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='reset'].button-outline[disabled]:focus,
input[type='submit'].button-outline.button-disabled:hover,
input[type='submit'].button-outline.button-disabled:focus,
input[type='submit'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus {
  color: #9b4dca;
  border-color: inherit;
}

.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear {
  color: #9b4dca;
  background-color: transparent;
  border-color: transparent;
}

.button.button-clear:hover,
.button.button-clear:focus,
button.button-clear:hover,
button.button-clear:focus,
input[type='button'].button-clear:hover,
input[type='button'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='submit'].button-clear:hover,
input[type='submit'].button-clear:focus {
  color: #606c76;
  background-color: transparent;
  border-color: transparent;
}

.button.button-clear.button-disabled:hover,
.button.button-clear.button-disabled:focus,
.button.button-clear[disabled]:hover,
.button.button-clear[disabled]:focus,
button.button-clear.button-disabled:hover,
button.button-clear.button-disabled:focus,
button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
input[type='button'].button-clear.button-disabled:hover,
input[type='button'].button-clear.button-disabled:focus,
input[type='button'].button-clear[disabled]:hover,
input[type='button'].button-clear[disabled]:focus,
input[type='reset'].button-clear.button-disabled:hover,
input[type='reset'].button-clear.button-disabled:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='reset'].button-clear[disabled]:focus,
input[type='submit'].button-clear.button-disabled:hover,
input[type='submit'].button-clear.button-disabled:focus,
input[type='submit'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus {
  color: #9b4dca;
}

code {
  background: #f4f5f6;
  border-radius: 0.4rem;
  font-size: 86%;
  padding: 0.2rem 0.5rem;
  margin: 0 0.2rem;
  white-space: nowrap;
}

pre {
  background: #f4f5f6;
  border-left: 0.3rem solid #9b4dca;
  font-family: "Menlo", "Consolas", "Bitstream Vera Sans Mono", "DejaVu Sans Mono", "Monaco", monospace;
}

pre>code {
  background: transparent;
  border-radius: 0;
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

hr {
  border: 0;
  border-top: 0.1rem solid #f4f5f6;
  margin-bottom: 3.5rem;
  margin-top: 3rem;
}

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0.1rem solid #d1d1d1;
  border-radius: 0.4rem;
  box-shadow: none;
  height: 3.8rem;
  padding: 0.6rem 1rem;
  width: 100%;
}

input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
textarea:focus,
select:focus {
  border: 0.1rem solid #9b4dca;
  outline: 0;
}

select {
  padding: 0.6rem 3rem 0.6rem 1rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjkgMTQiICAgaGVpZ2h0PSIxNHB4IiAgIGlkPSJMYXllcl8xIiAgIHZlcnNpb249IjEuMSIgICB2aWV3Qm94PSIwIDAgMjkgMTQiICAgd2lkdGg9IjI5cHgiICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjQgcjk5MzkiICAgc29kaXBvZGk6ZG9jbmFtZT0iY2FyZXQtZ3JheS5zdmciPjxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhMzAzOSI+PHJkZjpSREY+PGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzICAgICBpZD0iZGVmczMwMzciIC8+PHNvZGlwb2RpOm5hbWVkdmlldyAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiICAgICBib3JkZXJvcGFjaXR5PSIxIiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIgICAgIGdyaWR0b2xlcmFuY2U9IjEwIiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSI5MDMiICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI1OTQiICAgICBpZD0ibmFtZWR2aWV3MzAzNSIgICAgIHNob3dncmlkPSJ0cnVlIiAgICAgaW5rc2NhcGU6em9vbT0iMTIuMTM3OTMxIiAgICAgaW5rc2NhcGU6Y3g9Ii00LjExOTMxODJlLTA4IiAgICAgaW5rc2NhcGU6Y3k9IjciICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNTAyIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwMiIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIj48aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkMzA0MSIgLz48L3NvZGlwb2RpOm5hbWVkdmlldz48cG9seWdvbiAgICAgcG9pbnRzPSIwLjE1LDAgMTQuNSwxNC4zNSAyOC44NSwwICIgICAgIGlkPSJwb2x5Z29uMzAzMyIgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAuMzU0MTEzODcsMCwwLDAuNDgzMjkxMSw5LjMyNDE1NDUsMy42MjQ5OTkyKSIgICAgIHN0eWxlPSJmaWxsOiNkMWQxZDE7ZmlsbC1vcGFjaXR5OjEiIC8+PC9zdmc+) center right no-repeat;
}

select:focus {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjkgMTQiICAgaGVpZ2h0PSIxNHB4IiAgIGlkPSJMYXllcl8xIiAgIHZlcnNpb249IjEuMSIgICB2aWV3Qm94PSIwIDAgMjkgMTQiICAgd2lkdGg9IjI5cHgiICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjQgcjk5MzkiICAgc29kaXBvZGk6ZG9jbmFtZT0iY2FyZXQuc3ZnIj48bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTMwMzkiPjxyZGY6UkRGPjxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcyAgICAgaWQ9ImRlZnMzMDM3IiAvPjxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iOTAzIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNTk0IiAgICAgaWQ9Im5hbWVkdmlldzMwMzUiICAgICBzaG93Z3JpZD0idHJ1ZSIgICAgIGlua3NjYXBlOnpvb209IjEyLjEzNzkzMSIgICAgIGlua3NjYXBlOmN4PSItNC4xMTkzMTgyZS0wOCIgICAgIGlua3NjYXBlOmN5PSI3IiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjUwMiIgICAgIGlua3NjYXBlOndpbmRvdy15PSIzMDIiICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iTGF5ZXJfMSI+PGlua3NjYXBlOmdyaWQgICAgICAgdHlwZT0ieHlncmlkIiAgICAgICBpZD0iZ3JpZDMwNDEiIC8+PC9zb2RpcG9kaTpuYW1lZHZpZXc+PHBvbHlnb24gICAgIHBvaW50cz0iMjguODUsMCAwLjE1LDAgMTQuNSwxNC4zNSAiICAgICBpZD0icG9seWdvbjMwMzMiICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjM1NDExMzg3LDAsMCwwLjQ4MzI5MTEsOS4zMjQxNTUzLDMuNjI1KSIgICAgIHN0eWxlPSJmaWxsOiM5YjRkY2Y7ZmlsbC1vcGFjaXR5OjEiIC8+PC9zdmc+);
}

textarea {
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  min-height: 6.5rem;
}

label,
legend {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}

fieldset {
  border-width: 0;
  padding: 0;
}

input[type='checkbox'],
input[type='radio'] {
  display: inline;
}

.label-inline {
  font-weight: normal;
  display: inline-block;
  margin-left: 0.5rem;
}

.container {
  margin: 0 auto;
  max-width: 112rem;
  padding: 0 2rem;
  position: relative;
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  padding: 0;
  width: 100%;
}

.row .row-wrap {
  flex-wrap: wrap;
}

.row .row-no-padding {
  padding: 0;
}

.row .row-no-padding>.column {
  padding: 0;
}

.row .row-top {
  align-items: flex-start;
}

.row .row-bottom {
  align-items: flex-end;
}

.row .row-center {
  align-items: center;
}

.row .row-stretch {
  align-items: stretch;
}

.row .row-baseline {
  align-items: baseline;
}

.row .column {
  display: block;
  flex: 1;
  margin-left: 0;
  max-width: 100%;
  width: 100%;
}

.row .column .col-top {
  align-self: flex-start;
}

.row .column .col-bottom {
  align-self: flex-end;
}

.row .column .col-center {
  align-self: center;
}

.row .column.column-offset-10 {
  margin-left: 10%;
}

.row .column.column-offset-20 {
  margin-left: 20%;
}

.row .column.column-offset-25 {
  margin-left: 25%;
}

.row .column.column-offset-33,
.row .column.column-offset-34 {
  margin-left: 33.3333%;
}

.row .column.column-offset-50 {
  margin-left: 50%;
}

.row .column.column-offset-66,
.row .column.column-offset-67 {
  margin-left: 66.6666%;
}

.row .column.column-offset-75 {
  margin-left: 75%;
}

.row .column.column-offset-80 {
  margin-left: 80%;
}

.row .column.column-offset-90 {
  margin-left: 90%;
}

.row .column.column-10 {
  flex: 0 0 10%;
  max-width: 10%;
}

.row .column.column-20 {
  flex: 0 0 20%;
  max-width: 20%;
}

.row .column.column-25 {
  flex: 0 0 25%;
  max-width: 25%;
}

.row .column.column-33,
.row .column.column-34 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

.row .column.column-40 {
  flex: 0 0 40%;
  max-width: 40%;
}

.row .column.column-50 {
  flex: 0 0 50%;
  max-width: 50%;
}

.row .column.column-60 {
  flex: 0 0 60%;
  max-width: 60%;
}

.row .column.column-66,
.row .column.column-67 {
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}

.row .column.column-75 {
  flex: 0 0 75%;
  max-width: 75%;
}

.row .column.column-80 {
  flex: 0 0 80%;
  max-width: 80%;
}

.row .column.column-90 {
  flex: 0 0 90%;
  max-width: 90%;
}

@media (min-width: 40rem) {
  .row {
    flex-direction: row;
    margin-left: -1rem;
    width: calc(100% + 2.0rem);
  }
  .row .column {
    margin-bottom: inherit;
    padding: 0 1rem;
  }
}

a {
  color: #9b4dca;
  text-decoration: none;
}

a:hover {
  color: #606c76;
}

dl,
ol,
ul {
  margin-top: 0;
  padding-left: 0;
}

dl ul,
dl ol,
ol ul,
ol ol,
ul ul,
ul ol {
  font-size: 90%;
  margin: 1.5rem 0 1.5rem 3rem;
}

dl {
  list-style: none;
}

ul {
  list-style: circle inside;
}

ol {
  list-style: decimal inside;
}

dt,
dd,
li {
  margin-bottom: 1rem;
}

.button,
button {
  margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem;
}

table {
  width: 100%;
}

th,
td {
  border-bottom: 0.1rem solid #e1e1e1;
  padding: 1.2rem 1.5rem;
  text-align: left;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

p {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  margin-bottom: 2rem;
  margin-top: 0;
}

h1 {
  font-size: 4rem;
  letter-spacing: -0.1rem;
  line-height: 1.2;
}

h2 {
  font-size: 3.6rem;
  letter-spacing: -0.1rem;
  line-height: 1.25;
}

h3 {
  font-size: 3rem;
  letter-spacing: -0.1rem;
  line-height: 1.3;
}

h4 {
  font-size: 2.4rem;
  letter-spacing: -0.08rem;
  line-height: 1.35;
}

h5 {
  font-size: 1.8rem;
  letter-spacing: -0.05rem;
  line-height: 1.5;
}

h6 {
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.4;
}

@media (min-width: 40rem) {
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 4.2rem;
  }
  h3 {
    font-size: 3.6rem;
  }
  h4 {
    font-size: 3rem;
  }
  h5 {
    font-size: 2.4rem;
  }
  h6 {
    font-size: 1.5rem;
  }
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.clearfix {
  *zoom: 1;
}

.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

<link href="http://milligram.io/css/milligram.min.css" rel="stylesheet" />
<section class="post" id="post-<?php the_ID(); ?>">

  <article class="entry">

    <h2>
      <?php the_title(); ?>
    </h2>

    <?php the_content(); ?>

    <div class="container-fluid container">
      <div class="row">
        <div class="column">column
          <br><br><br><br><br><br><br><br><br>
        </div>
        <!-- should be aligned to the bottom -->
        <div class="column">
          <div class="col-bottom">column</div>
        </div>
      </div>
    </div>

  </article>

</section>

您正在将 flex 属性应用于 a 的子级block元素。此类属性将被忽略，因为您处于块格式化上下文 https://www.w3.org/TR/CSS2/visuren.html#block-formatting.

切换自display: block to display: flex建立一个Flex 格式化上下文 https://www.w3.org/TR/css3-flexbox/#flex-containers.

而不是这个：

.row .column {
  display: block;
  flex: 1;
  margin-left: 0;
  max-width: 100%;
  width: 100%;
}

尝试这个：

.row .column {
  display: flex; /* adjusted */
  flex: 1;
  margin-left: 0;
  max-width: 100%;
  width: 100%;
}

为了解释align-self和别的交叉轴对齐属性，请参见此处：

flex-wrap 如何与align-self、align-items 和align-content 配合使用？ https://stackoverflow.com/q/42613359/3597276

了解沿线的弯曲对齐主轴，看这里：

在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？ https://stackoverflow.com/q/32551291/3597276

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

align-self：flex-end 在 Flexbox 中不起作用的相关文章

绝对元素后面元素上的文本选择

我有一个覆盖元素它隐藏了其他包含文本的 div 覆盖元素是绝对定位的我希望用户能够选择这些 div 后面的文本我的解决方案是隐藏用户事件 mouseDown 上的覆盖层显示无并在 mouseUp 事件发生时再次显示它这样一旦
防止浏览器弹出警告窗口

我正在尝试在新窗口中打开 jsp 页面使用 JavaScriptwindow open产生浏览器警告并且在某些情况下 firefox 将默认阻止弹出窗口有没有办法解决这个问题这不是恶意应用程序它是内部用户工具大多数浏览器不会阻止
为什么 textarea 不是 input[type="textarea"]？

为什么有一个元素
JavaFX 2：TableView：删除标题+空时显示网格

我有两个关于 Javafx 2 中的 TableView 的问题 1 是否可以隐藏表格中的标题 2 当表为空时它只显示一个白色窗格上面写着表中没有内容是否可以更改此设置以显示默认网格即使表格为空如果可能的话我想要一个带有 CS
application.css 未作为资产提供

编辑4 5和6 8小时后欢迎任何更多的想法也许这个错误已经被知道并解决了但是当你在 app assets stylesheets 的 css erb 文件中有这个时我得到了我在编辑 2 3 中描述的行为 li background
如何在 scss 中包含仅限 Safari 的样式？ [复制]

这个问题在这里已经有答案了我只是想修改仅适用于 safari 浏览器的样式属性这将覆盖默认属性简单的例子 Default div color blue Safari 浏览器 div color red 我想这可以通过 scss 的 i
jQuery 输入事件在 IE 中的占位符上触发

我有一个输入字段input绑定到它的事件通过 jQuery 每次输入值更改时都应触发此事件我添加了一个占位符来告诉用户此输入字段的用途如果用户单击此输入字段input不应触发事件该值实际上不会改变只是占位符消失它在 Firefo
突出显示 Html 文档中不同标签的文本

我是新来的角js 现在我正在突出显示 HTML 文档中的文本 So 我的代码是这样的 var InstantSearch highlight function container highlightText var internalHigh
如何删除垂直滚动条 SyntaxHighlighter 块？

我是网络开发的新手可能有一个主要问题我已经在我的网站上安装了 Joomla 2 5 CMS 下载安装并打开语法荧光笔 http alexgorbatchev com SyntaxHighlighter 插入然后启用bash语法并在我
生成的表的行跨度导致额外的单元格

HTML table border 1 cellspacing 1 width 100 thead tr td class csstextheader width 70px td td class csstextheader width 7
如何在 HTML5/CSS3 中将视口锁定为纵向方向

是否可以在移动设备上将视图端口的方向锁定为纵向我用谷歌搜索了它但无法找到确切的操作方法这个技巧应该有效 media screen and orientation landscape html Rotate the content co
关闭 Godot 中的游戏

我正在使用 Godot 创建网页游戏为了关闭游戏我尝试使用 get tree quit 如果我在 IDE 上使用它它就可以工作当我在我的服务器上尝试它时导出项目后它不起作用我确信导出设置没问题我怎样才能关闭游戏并且如何添
使用 jQuery 对 CSS 变换进行动画处理

我正在尝试为 div 制作动画并让它绕 y 轴旋转 180 度当我调用以下代码时出现 jQuery 错误 my div animate transform rotateY 180deg webkit transform rotateY
为什么有人将（Apache mod_expires 参数）ExpiresByType 设置为“访问加 0 秒”？

在审查答案时这个帖子 https stackoverflow com questions 9933012 how to use mod headers and mod expires to cache 我不明白为什么这里使用 0 秒作为最佳
如何链接到具有特定经度和纬度的 Google 地图？

我有一个小应用程序可以提供当前位置经度和纬度现在我必须浏览带有经度和纬度的谷歌地图请建议我如何做到这一点最好的方法是使用q参数以便显示带有标记点的地图例如 https maps google com q
如何使表格单元格的最小宽度为 3 位数字？

如何使表格中的每个单元格的最小宽度为 3 位数字且不会更大现在我正在硬编码min width 但我不喜欢硬编码一个值因为我将来可能想更改字体如果需要Javascript也没关系 table border 1 tr td 1 td td
HTML5 画布将颜色应用于形状重叠的图像

我将此图像绘制到 HTML5 画布上我想做的就是只给它的一部分应用颜色我想要应用颜色的部分由以下覆盖图像定义所以基本上我想通过叠加来指导我的着色因此在覆盖像素与主图像像素相遇的地方我应该在主图像上应用颜色至少我认为它是这样
html 下钻下拉所选值未插入 MYSQL

我有两个下拉列表首先从数据库下拉填充根据第一个下拉列表的选定值从数据库填充第二个下拉列表 document ready function c change function var c1 c selected text if c1 aj
我可以使用 :hover 触发 CSS3 动画（或过渡），即使鼠标不再悬停，该动画也会继续运行

我正在创建一个链接列表其中一个链接容器在悬停时会展开包含详细信息图像和说明我用 CSS 过渡或动画来制作动画没有任何问题问题是我希望它即使在鼠标移开后也能保持展开状态我想在没有 JavaScript 的情况下做到这一点那可能吗
CSS 未使用 req.params 或其他内容加载

我对节点表达等非常陌生我制作了一个博客应用程序但遇到了问题我正在使用 mongoose node express 和 ejs 当我打电话时 router get posts function req res Post find fu

随机推荐

如何移动然后删除MySQL中的字段

我试图将字段从一个表移动到另一个表然后从第一个表中删除它我遇到的问题是它可以很好地移动数据但不会从第一个表中删除它这是我的代码 INSERT INTO out tickets SELECT FROM tickets DELETE F
什么推理导致“包含递归定义的序列表达式编译不正确”

问题尽管尾调用位置存在堆栈溢出但仅限 64 位 https stackoverflow com q 35751350 1243762导致发现一个bug https github com Microsoft visualfsharp iss
参数类型“Map Function()”无法分配给参数类型“Map ”

这最初可能有效但在 firebase 更新后现在给我这个错误我已在给出错误的部分添加了星号错误消息已添加到代码下方 import package cloud firestore cloud firestore dart class
Grails 从服务中渲染视图？

我刚刚开始在 Grails 中使用服务在尝试从服务内部渲染页面时遇到问题我尝试了如下所示的几种方法但没有成功服务电话 1 GroupCheckService isEnabled userObjects group notenable
在 AuthorizeAttribute Mvc Core Web Api 中获取控制器实例

我使用下面的类来控制我的 api 方法请求并设置 BaseController 类的一些属性以在方法中常用这个来自 Asp Net Mvc Web Api using System using System Collections Ge
如何使用 R 找到数据中最常见的序列？

我正在尝试弄清楚如何使用rollapply函数从Zoo包来查找数据集中最常见字符串的序列但我还需要对某些变量例如日期行等进行分组在进一步讨论之前值得注意的是该查询建立在我之前在此发布的一个问题的基础上如何使用 Table
React/Router/MemoryRouter - 如何传递历史属性并在子组件中使用push()？

我正在构建一个 React 应用程序我不希望更新浏览器中的 URL 我没有使用 react router dom 而只使用 react router 和 MemoryRouter https reacttraining com react
cos-extensions 安装 gpu 无法在 GCP Compute Engine 虚拟机上下载驱动程序签名

我正在 GCP 计算引擎上使用支持 GPU 的虚拟机作为操作系统我使用容器优化版本 COS 89 16108 403 47 LTS 它支持通过 SSH 运行 cos extensions install gpu 来安装简单的 GPU 驱
使用 cython 为一组文件制作一个 pyd [重复]

这个问题在这里已经有答案了我在一个包中有多个 py 文件 packageA init py mod1 py mod2 py mod3 py 我可以配置 cython 进行编译然后将它们全部打包在一个中吗packageA pyd 就我个人而
如何在 Ruby 中生成随机日期？

我的 Rails 3 应用程序中有一个模型其中有一个date field class CreateJobs lt ActiveRecord Migration def self up create table jobs do t t da
路径为空的 Uri

是否可以使用 System Uri 来表示带有空路径组件的 URL 每当我创作时 new Uri http example com Net 4 似乎坚持附加尾部斜杠从而创建不同的 URL 换句话说 new Uri http example
我的调试 AndroidManifest.xml 给出“无法解析符号错误”
按字母顺序对 Enum.values() 进行排序并将它们添加到 Spinner ArrayAdapter

我正在开发一个与 Web 服务配合使用的 Android 应用程序我想按字母顺序排序Enum values 通过其描述我有这个Enum public enum Stature tall 0 MSDApplication getAppCo
ggplot geom_point随窗口大小变化大小

我在创建地图时遇到一些问题ggplot2在上面我使用投影点geom point 当导出为 pdf 或其他支持时点大小会有所不同因为她是绝对的而不是相对于轴的我搜索了如何改变它并找到了很多答案说这是故意的因为如果不是这种情况每
如何使用 Spring Security 在用户首次登录时强制更改密码

使用 Spring Security 在用户首次登录时实现强制密码更改的最优雅的方法是什么我尝试实施自定义AuthenticationSuccessHandler如上所述here https stackoverflow com a 333
OpenCV：“libopencv_core.so.2.3：无法打开共享对象文件：没有这样的文件或目录”

我刚刚在 Debian 机器上安装了 OpenCV 但遇到了问题我按照 Wiki 上的安装指南进行操作尝试编译这些示例似乎可以成功编译但是尝试运行它们最终会抛出错误 fagg hubble src OpenCV 2 3 1 sampl
如何创建没有代码隐藏文件的 ASMX Web 服务页面

我已经能够创建没有后台代码的 ASPX 页面但我一生都无法找出让 ASMX 页面在没有后台代码的情况下工作的神奇组合这可能吗快速样本 using System using System Data using System Web us
从 java 运行 R 脚本 - Rconnection eval 异常

我怎么解决这个问题我尝试清空缓存重新安装 R 和 Rscript connection new RConnection String path source rScript getFile getAbsolutePath connect
如何执行两个 SpatialPolygonsDataFrame 对象的矢量叠加？

我有两个 GIS 图层称呼它们为Soils and Parcels 存储为SpatialPolygonsDataFrames SPDFs 我想覆盖它们在此处描述的意义上 http resources esri com help 9
align-self：flex-end 在 Flexbox 中不起作用

我正在使用 milligram css 一个微型 CSS 框架 https milligram github io grids 我想将列内的 DIV 与底部对齐但没有任何反应 DIV 始终顶部对齐 https jsfiddle net f

align-self：flex-end 在 Flexbox 中不起作用

align-self：flex-end 在 Flexbox 中不起作用 的相关文章

随机推荐

热门标签

align-self：flex-end 在 Flexbox 中不起作用的相关文章