Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

align-self: flex-end not working in flexbox

Tags:

html

css

flexbox

I'm using "milligram.css" (a micro CSS framework).

I want to align a DIV inside a column to the bottom.

But nothing happens, the DIV is always aligned top.

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>
like image 882
Henning Fischer Avatar asked Feb 20 '16 18:02

Henning Fischer

1 Answers

You're applying flex properties to a child of a block element. Such properties will be ignored because you're in a block formatting context.

Switch from display: block to display: flex to establish a flex formatting context.

Instead of this:

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

Try this:

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

For an explanation of align-self and other cross axis alignment properties, see here:

  • How does flex-wrap work with align-self, align-items and align-content?

To learn about flex alignment along the main axis, see here:

  • In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
like image 67
Michael Benjamin Avatar answered Oct 12 '22 10:10

Michael Benjamin
Sign in to Comment

Related questions

Wire up Elm lang and Semantic UI
How can I trigger an event when this span value changes?
How to inscribe the following shape with CSS inside div?
How to use mix-blend-mode, but not have it affect child elements?
Font-Awesome fa-circle with two colors?
How to insert div class into JQuery?
UI-Bootstrap Carousel won't cooperate with my Angular App. Why?
Multiple Google Charts
Table column width equal to content width
AngularJs Return HTML from Controller
Page Loader in html page
Table tr background gradient on hover using CSS
HTML5 native Drag 'n' Drop - Detect cancellation
How to reduce the size of image with cursor url?
Can you use subdirectories within Jekyll's _includes folder?
How to center a svg in a div container
How to change HTML range slider value with button?
Convert DataURL image to image file in java
How to fit HTML parent element's bounding box to a CSS transformed child?
Using BeautifulSoup to find tag with two specific styles

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!