CSS Flexbox (flexibel box)


Innehållsförteckning

    Visa innehållsförteckning


1

2

3

4

5

6

7

8

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

CSS Flexbox layoutmodul

Innan Flexbox Layout-modulen fanns det fyra layoutlägen:

Block

Blockliknande, för avsnitt på en webbsida

Inline

Inline, för text

Table

Tabell, för tvådimensionell tabelldata

Positioned

Positionerad, för explicit position av ett element

Flexible Box Layout Module, gör det lättare att designa flexibel responsiv layoutstruktur utan att använda flytande eller positionering.


Webbläsarstöd

Flexbox-egenskaperna stöds i alla moderna webbläsare.

29.0 11.0 22.0 10 48

Flexbox element

För att börja använda Flexbox-modellen måste du först definiera en flexbehållare.

1

2

3

Elementet ovan representerar en flexbehållare (det blå området) med tre flexartiklar.

Exempel

En flexbehållare med tre flexartiklar:

<div 
  class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Create a Flex Container</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>


Du kommer att lära dig mer om flexbehållare och flexartiklar i nästa kapitel.