Buch & Berger

  • Angebot
  • Agentur
  • Blog
  • Kontakt
  • Search

Flexbox: CSS Notes

Item Spacing

The following example adds a 5px gutter between the flexbox items. In order to use a negative margin on all sides of the flexbox container, it’s width must be set to auto (= default). An additional container element is required to set a width.

.container {
  width: 600px;
}

.wrapper {
  display: flex;
  margin: -5px;
}

.item {
  margin: 5px;
}

Bugs

IE 11

  • Flex item images overflowing container: Set flex item to display flex and set the image and intermediate containers to max-width 100%.
  • Try using flex-grow, -shrink and -basis seperately instead of flex-flow.
  • Remove the –ms-flex-pack property, added by autoprefixer.

Bearbeitet: 2019-10-14
Veröffentlicht: 2017-03-12
Rubrik: Developer Notes

Stefan Buchberger

Über den Autor

Stefan Buchberger beschäftigt sich seit vielen Jahren mit der Präsentation, Verbreitung und Kommunikation von Inhalten. Er war vor allem als Buchverleger aktiv.

Heute gilt seine Aufmerksamkeit einer nachhaltigeren Form der Webentwicklung, welche die Inhalte zurück in den Fokus rückt.

Seitenleiste

Neue Beiträge

SiteGround: Renewal Reminders

Sobald sich die Vertragslaufzeit für einen SiteGround-Service (z.B. Hosting oder Domain) ihrem Ende nähert, erhalten …

Wartungsbericht: Begriffe erklärt

Unsere Wartungskunden erhalten regelmäßig einen individuellen Wartungsbericht für ihre Websites. Einige Begriffe, die wir darin …

Internationale Literaturdialoge

Das Projekt Internationale Literaturdialoge möchte innovative Kooperationsprojekte österreichischer Literaten mit Kreativen im Ausland ins Leben …
Mann skizziert Projekt auf Tafel

Wege zur Website: Nach Maß und von der Stange

Websites entstehen individuell und nach Maß oder auf Basis bestehender Vorlagen. Vielfach aber: sowohl als …
Boy singing in microphone

Testimonials: Das sagen unsere Kunden

Im Mittelpunkt eines Projekts steht für uns selbstverständlich die Zufriedenheit des Auftraggebers. Wir freuen uns …

Newsletter

Unser Newsletter mit Tipps und Angeboten erscheint wenige Male im Jahr. Infos zu Versand und Verarbeitung erhalten Sie in unserer Datenschutzerklärung.

    nav-social-menu

    • LinkedIn
    • RSS
  • Impressum
  • Datenschutz
Top ▲
Top ▲
Finde

Zeige alle ...

Generic filters