© Copyright kaxigt.com. All Rights Reserved.

Är flexbox och grid lösningen på äldre CSS-problem?

Postad: 12 maj 2020 | CSS | No Comments

Lästid: 2 minuter

Flexbox grids block element children. Css har utvecklats enormt de sista åren. Om vi har gamla CSS-kod, hur löser man det då på bästa sätt?

Modern CSS Solutions for Old CSS Problems – Moderna CSS-lösningar för äldre CSS-problem

Så heter Stephanie Eckles spännande serie om hur vi kan ta oss an äldre CSS och med nutida lösningar få dem att fungera. För tillfället finns det nio (9) avsnitt men det lovar för många fler. Låt oss snabbkika på ett avsnitt!

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

Equal Height Elements: Flexbox vs. Grids

När flexbox kom så förändrade, och förenklade, det sättet att kunna använda sina block och layoutformateringar. Som standardläge lade sig alla ”barn” på linje i en rad där alla var lika höga.

Toppen!

Problemet kom när man lade till två .column-divs som direkta children/barn. Helt plötsligt så var de inte längre lika höga.

Flexbox

.flexbox {
  display: flex;
}

Fix för äldre flexbox

.flexbox {
  display: flex;
  
// Ensure content elements fill up the .column
  .element {
    height: 100%;
  }
}

Nu kommer kolumnerna vara lika höga och öka i takt med innehållet i .element.

Grid Solution

När det gäller grid så stöter vi på liknande problem.

.grid {
  display: grid;
  // Essentially switch the default axis
  grid-auto-flow: column;
}

Precis som med flexbox kommer direkta children/barn hålla samma höjd. Det är deras barn i sin tur som kräver en liknande lösning som med flexbox.

.grid {
  display: grid;
  grid-auto-flow: column;
  
  // Ensure content elements fill up the .column
  .element {
    height: 100%;
  }
}

Se exempel: https://codepen.io/5t3ph/pen/BaoamwO

Alla avsnitt i serien

Källa: https://moderncss.dev/

kaxigt.com

Jag skriver om webben för webben