Lösningar på äldre CSS-problem

Postad: 12.05.2020 | CSS Lästid: 2 minuter

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. Grid

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/]

(Visited 16 times, 4 visits today)

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

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