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

Postad: 12.05.2020 | CSS

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

  1. Keep the Footer at the Bottom: Flexbox vs. Grid
  2. Equal Height Elements: Flexbox vs. Grid
  3. CSS-Only Full-Width Responsive Images 2 Ways
  4. Pure CSS Smooth-Scroll ”Back to Top”
  5. Totally Custom List Styles
  6. Animated Image Gallery Captions with Bonus Ken Burns Effect
  7. CSS-Only Accessible Dropdown Navigation Menu
  8. Solutions to Replace the 12-Column Grid
  9. CSS Button Styling Guide

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

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.