CSS Flexbox Container

Indholdsfortegnelse

Vis indholdsfortegnelse

Overordnet element (beholder)

Som vi specificerede i det forrige kapitel, er dette en flex beholder (det blå område) med tre flex emner:

1

2

3

Flex-beholderen bliver fleksibel ved at sætte egenskaben display til flex:

Eksempel

 .flex-container {
  
  display: flex;
}

Prøv det selv →

<!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>

Flexbeholderens egenskaber er:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Den flex-retning Ejendom

Egenskaben flex-direction definerer, i hvilken retning containeren ønsker at stable flex-emnerne.

1

2

3

Eksempel

Værdien kolonne stabler flex-elementerne lodret (fra top til bund):

 .flex-container {
  
  display: flex;
  
  flex-direction: column;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  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>The flex-direction Property</h1>

<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>

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

</body>
</html>

Eksempel

Værdien column-reverse stabler flex-elementerne lodret (men fra bund til top):

 .flex-container {
  
  display: flex;
  
  flex-direction: column-reverse;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column-reverse;
  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>The flex-direction Property</h1>

<p>The "flex-direction: column-reverse;" stacks the flex items vertically (but from bottom to top):</p>

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

</body>
</html>

Eksempel

Værdien række stabler flex-elementerne vandret (fra venstre mod højre):

 .flex-container {
  
  display: flex;
  
  flex-direction: row;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  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>The flex-direction Property</h1>

<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>

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

</body>
</html>

Eksempel

Værdien row-reverse stabler flex-emnerne vandret (men fra højre mod venstre):

 .flex-container {
  
  display: flex;
  
  flex-direction: row-reverse;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row-reverse;
  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>The flex-direction Property</h1>

<p>The "flex-direction: row-reverse;" stacks the flex items horizontally (but from right to left):</p>

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

</body>
</html>

Den flex-wrap ejendom

Egenskaben flex-wrap angiver, om flex-elementerne skal ombrydes eller ej.

Eksemplerne nedenfor har 12 flex-elementer for bedre at demonstrere flex-wrap egenskab.

1

2

3

4

5

6

7

8

9

10

11

12

Eksempel

wrap-værdien angiver, at flex-elementerne vil pakkes om nødvendigt:

 .flex-container {
  
  display: flex;
  
  flex-wrap: wrap;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  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>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

Eksempel

nowrap-værdien angiver, at flex-emnerne ikke vil ombrydes (dette er standard):

 .flex-container {
  
  display: flex;
  
  flex-wrap: nowrap;
}

Prøv det selv →

<!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>The flex-wrap Property</h1>

<p>The "flex-wrap: nowrap;" specifies that the flex items will not wrap (this is default):</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

Eksempel

Værdien wrap-reverse angiver, at de fleksible varer vil pakkes ind om nødvendigt i omvendt rækkefølge:

 .flex-container {
  
  display: flex;
  
  flex-wrap: wrap-reverse;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
  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>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap-reverse;" specifies that the flex items will wrap if necessary, in reverse order:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

Den flex-flow ejendom

Egenskaben flex-flow er en stenografi-egenskab til indstilling af både flex-direction og flex-wrap egenskaber.

Eksempel

 .flex-container {
  
  display: flex;
  
  flex-flow: row wrap;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-flow: row wrap;
  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>The flex-flow Property</h1>

<p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

Den retfærdiggøre-indhold Ejendom

Egenskaben justify-content bruges til at justere flex-elementerne:

1

2

3

Eksempel

Værdien center justerer de fleksible elementer i midten af containeren:

 .flex-container {
  
  display: flex;
  
  justify-content: center;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  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>The justify-content Property</h1>

<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>

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

</body>
</html>

Eksempel

Værdien flex-start justerer flex-elementerne i begyndelsen af containeren (dette er standard):

 .flex-container {
  
  display: flex;
  
  justify-content: flex-start;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: flex-start;
  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>The justify-content Property</h1>

<p>The "justify-content: flex-start;" aligns the flex items at the beginning of the container (this is default):</p>

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

</body>
</html>

Eksempel

Værdien flex-end justerer flex-elementerne i slutningen af containeren:

 .flex-container {
  
  display: flex;
  
  justify-content: flex-end;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: flex-end;
  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>The justify-content Property</h1>

<p>The "justify-content: flex-end;" aligns the flex items at the end of the container:</p>

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

</body>
</html>

Eksempel

Værdien space-around viser flex-elementerne med mellemrum før, mellem, og efter linjerne:

 .flex-container {
  
  display: flex;
  
  justify-content: space-around;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-around;
  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>The justify-content Property</h1>

<p>The "justify-content: space-around;" displays the flex items with space before, between, and after the lines:</p>

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

</body>
</html>

Eksempel

Værdien space-between viser flex-elementerne med mellemrum mellem linjer:

 .flex-container {
  
  display: flex;
  
  justify-content: space-between;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  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>The justify-content Property</h1>

<p>The "justify-content: space-between;" displays the flex items with space between the lines:</p>

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

</body>
</html>

Justeringselementerne Ejendom

Egenskaben align-items bruges til at justere flex-elementerne.

1

2

3

I disse eksempler bruger vi en 200 pixels høj beholder for bedre at demonstrere egenskaben align-items.

Eksempel

center-værdien justerer flex-elementerne i midten af beholder:

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: center;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  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>The align-items Property</h1>

<p>The "align-items: center;" aligns the flex items in the middle of the container:</p>

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

</body>
</html>

Eksempel

Værdien flex-start justerer flex-elementerne øverst i containeren:

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: flex-start;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  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>The align-items Property</h1>

<p>The "align-items: flex-start;" aligns the flex items at the top of the container:</p>

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

</body>
</html>

Eksempel

Værdien flex-end justerer flex-elementerne i bunden af beholderen:

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: flex-end;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
  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>The align-items Property</h1>

<p>The "align-items: flex-end;" aligns the flex items at the bottom of the container:</p>

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

</body>
</html>

Eksempel

stretch-værdien strækker flex-emnerne for at fylde beholderen (dette er standard):

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: stretch;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  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>The align-items Property</h1>

<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>

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

</body>
</html>

Eksempel

Værdien baseline justerer flex-elementerne, såsom deres basislinjer justerer:

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: baseline;
}

Bemærk: eksemplet bruger forskellige skriftstørrelser til at demonstrere, at elementerne bliver justeret efter tekstens grundlinje:

1

2

3

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  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>The align-items Property</h1>

<p>The "align-items: baseline;" aligns the flex items such as their baselines aligns:</p>

<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>  
  <div><small>4</div>  
</div>

</body>
</html>

Egenskaben align-content

Egenskaben align-content bruges til at justere flexlinjerne.

1

2

3

4

5

6

7

8

9

10

11

12

I disse eksempler bruger vi en 600 pixels høj beholder med flex-wrap egenskab sat til wrap for bedre at demonstrere egenskaben align-content.

Eksempel

Værdien space-between viser flexlinjerne med lige stor mellemrum mellem dem:

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: space-between;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
  overflow: scroll;
  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>The align-content Property</h1>

<p>The "align-content: space-between;" displays the flex lines with equal space between them:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

Eksempel

Værdien space-around viser flexlinjerne med mellemrum før, mellem og efter dem:

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: space-around;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
  overflow: scroll;  
  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>The align-content Property</h1>

<p>The "align-content: space-around;" displays the flex lines with space before, between, and after them:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

Eksempel

stretch-værdien strækker flexlinjerne for at optage de resterende mellemrum (dette er standard):

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: stretch;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
  overflow: scroll;  
  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>The align-content Property</h1>

<p>The "align-content: stretch;" stretches the flex lines to take up the remaining space (this is default):</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

Eksempel

Værdien center viser flexlinjerne i midten af beholderen:

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: center;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
  overflow: scroll;  
  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>The align-content Property</h1>

<p>The "align-content: center;" displays the flex lines in the middle of the container:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

Eksempel

Værdien flex-start viser flexlinjerne i starten af containeren:

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: flex-start;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: scroll;  
  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>The align-content Property</h1>

<p>The "align-content: flex-start;" displays the flex lines at the start of the container:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

Eksempel

Værdien flex-end viser flexlinjerne i slutningen af containeren:

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: flex-end;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
  overflow: scroll;  
  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>The align-content Property</h1>

<p>The "align-content: flex-end;" displays the flex lines at the end of the container:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

Perfekt centrering

I det følgende eksempel vil vi løse et meget almindeligt stilproblem: perfekt centrering.

LØSNING: Indstil både egenskaberne justify-content og align-items til center, og flex-elementet vil være perfekt centreret:

Eksempel

 .flex-container {
  display: flex;
  height: 300px;
  justify-content: 
  center;
  align-items: center;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  color: white;
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Perfect Centering</h1>

<p>A flex container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="flex-container">
  <div></div>
</div>

</body>
</html>

CSS Flexbox-beholderegenskaberne

Følgende tabel viser alle egenskaberne for CSS Flexbox Container:

align-content: Ændrer adfærden for flex-wrap-egenskaben. Det ligner align-items, men i stedet for at justere flex-emner, justerer det flex-linjer
align-items: Justerer de fleksible emner lodret, når emnerne ikke bruger al tilgængelig plads på tværaksen
display: Angiver den type boks, der bruges til et HTML-element
flex-direction: Angiver retningen af de fleksible genstande inde i en fleksbeholder
flex-flow: En stenografi-egenskab til flex-direction og flex-wrap
flex-wrap: Angiver om flex-emnerne skal pakkes ind eller ej, hvis der ikke er plads nok til dem på én flex-linje
justify-content: Justerer de fleksible emner vandret, når emnerne ikke bruger al tilgængelig plads på hovedaksen