Flexbox Calendar Layout

Flexbox Calendar Layout.markdown

Flexbox Calendar Layout

Demo calendar layout using Flexbox

A Pen by Spencer Putnam on CodePen.

License.

index.html

.month
  .week
    .day 1
    .day 2
    .day 3
    .day 4
  .week
    .day 5
    .day 6
    .day 7
    .day 8
    .day 9
    .day 10
    .day 11
  .week
    .day 12
    .day 13
    .day 14
    .day 15
    .day 16
    .day 17
    .day 18
  .week
    .day 19
    .day 20
    .day 21
    .day 22
    .day 23
    .day 24
    .day 25
  .week
    .day 26
    .day 27
    .day 28
    .day 29
    .day 30
    .day 31

style.css

body {
  box-sizing: border-box;
  background: linear-gradient(135deg, #b24, #f62) fixed;
}

.month {
  min-width: 800px;
  height: 100%;
}

.week {
  display: flex;
}

.day {
  background-color: transparentize(white, 0.8);
  color: #ddd;
  padding: 10px 0 75px 10px;
  margin: 2px;
  flex: 1 1 0;
}

.week:first-of-type .day:first-of-type {
  margin-left: 42.85714%;
}

.week:last-of-type .day:last-of-type {
  margin-right: 14.285%;
}