Hoppa till huvudinnehåll

Vi använder kakor på vår webbsajt. När du använder våra webbtjänster accepterar du också att information om ditt besök lagras i din webbläsare.

Kolumner i bootstrap

Hur man fixar dem med flexbox

Det här är en webbsida för internt bruk. Den innehåller inga hemligheter, utan är en testsida för frontend-kod. Det är lite så vi tänker och jobbar på Arbetsgivarföreningen KFO. Vi gillar att labba med nya grejer. Sidan är inte indexerad och finns därför inte på Googles serpar. Om du hittat den så beror det på att du har länken.

Här har vi använt guiden på CSS Tricks: A complete Guide to Flexbox.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS-koden

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start; 
  align-items: center; 
  align-content: center;
}

.flex-container .flex-child {
  flex: 0 1 auto;
}

.flex-container img {
  width: auto;
  max-width: 120px;
  margin: 0 20px 30px 0;
}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Delaktighetsdagen är ett partsgemensamt initiativ tillsammans med

Vision