flexbox layout

by phloe

HTML

<div class="row flexbox autofit">

	<div class="cell cell-b">
		<div>
			<div class="image">
				<img src="https://fillmurray.com/500/500">
			</div>
			
			<a contenteditable="true">Advokat for skattesnydere i Panama-papirer: Nu risikerer de fængsel</a></div>
		<div>
			<div class="image">
				<img src="https://fillmurray.com/500/300">
			</div>
			
			<a contenteditable="true">VIDEO Skjulte optagelser afslører ting</a></div>
		<div>
			<div class="image">
				<img src="https://fillmurray.com/320/240">
			</div>
			
			<a contenteditable="true">Hollandsk politi anholdt turister - troede de var eftersøgte terrorister</a>
		</div>
	</div>

	<div class="cell cell-a">
		<div>
			<div class="image">
				<img src="https://fillmurray.com/720/520">
			</div>
			<a contenteditable="true">2025-plan: Færre offentligt ansatte til flere ældre</a></div>
	</div>

</div>

<div class="panel">
	<button class="flexbox">Flexbox</button>
	<button class="autofit">Autofit images</button>
</div>

SCSS

@font-face {
  font-family: "gibsonSemiBold";
  src: url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.eot");
  src: url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.eot?#iefix") format("embedded-opentype"),
    url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff2") format("woff2"),
    url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff") format("woff"),
    url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.ttf") format("truetype"),
    url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.svg") format("svg");
  font-weight: normal; }

  html {
    box-sizing: border-box; }

    body {
      margin: 73px 0 0 0; }

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

        .row {
          max-width: 1280px;
          margin: 0 auto; }
          .row:after {
            content: "";
            display: block;
            clear: both; }
            .row.flexbox {
              display: flex;
              flex-wrap: wrap; }

.cell {
  float: left;
  min-width: 50%;
  width: calc((800px - 100%) * 800);
  max-width: 100%; }
  .cell:after {
    content: "";
    display: block;
    clear: both; }
    .cell > * {
      float: left;
      padding-bottom: 15px;
      border-bottom: 1px solid #ccc;
      margin: 20px; }
      .cell > * > a {
        display: block;
        width: 100%;
        font-family: "gibsonSemiBold";
        margin-top: 15px;
        font-size: 24px;
        color: #000;
        text-decoration: none; }
        .cell > * > .image {
          width: 100%;
          position: relative; }
          .cell > * > .image img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; }
            .cell > * > .image:after {
              content: "";
              display: block;
             ...

JavaScript

var flexbox = true, autofit = true;
var root = document.querySelector(".row");
document.querySelector(".panel .flexbox").onclick = function () {
	flexbox = !flexbox;
	setClassName();
};
document.querySelector(".panel .autofit").onclick = function () {
	autofit = !autofit;
	setClassName();
};

function setClassName() {
	root.className = "row" + ((flexbox) ? " flexbox" : "") + ((autofit) ? " autofit" : "");
}