CSS Flexbox tároló

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Szülőelem (tároló)

Az előző fejezetben leírtaknak megfelelően ez egy rugalmas tároló (a kék terület), amely három rugalmas elemet tartalmaz:

1

2

3

A rugalmas tároló rugalmassá válik a display tulajdonság beállításával flex:

Példa

 .flex-container {
  
  display: flex;
}

Próbálja ki Ön is →

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

A rugalmas tartály tulajdonságai a következők:

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

A rugalmas irányú tulajdonság

A flex-direction tulajdonság határozza meg, hogy a tároló milyen irányban szeretné halmozni a rugalmas elemeket.

1

2

3

Példa

Az oszlop érték függőlegesen (fentről lefelé) halmozza fel a rugalmas elemeket:

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

Próbálja ki Ön is →

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

Példa

Az oszlop-fordítás érték függőlegesen (de alulról felfelé) rakja egymásra a rugalmas elemeket:

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

Próbálja ki Ön is →

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

Példa

A row érték a rugalmas elemeket vízszintesen (balról jobbra) rakja egymásra:

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

Próbálja ki Ön is →

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

Példa

A row-reverse érték a rugalmas elemeket vízszintesen (de jobbról balra) rakja egymásra:

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

Próbálja ki Ön is →

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

A flex-wrap tulajdonság

A flex-wrap tulajdonság megadja, hogy a flex elemeket be kell-e tördelni vagy sem.

Az alábbi példák 12 rugalmas elemet tartalmaznak a jobb bemutatása érdekében flex-wrap tulajdonság.

1

2

3

4

5

6

7

8

9

10

11

12

Példa

A wrap érték megadja, hogy a flex elemeket szükség esetén tördeljük:

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

Próbálja ki Ön is →

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

Példa

A nowrap érték megadja, hogy a flex elemek nem tördelődnek (ez alapértelmezett):

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

Próbálja ki Ön is →

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

Példa

A wrap-reverse érték azt határozza meg, hogy a rugalmas elemek becsomagolásra kerülnek ha szükséges, fordított sorrendben:

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

Próbálja ki Ön is →

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

A flex-flow tulajdonság

A flex-flow tulajdonság egy rövidített tulajdonság a flex-direction és flex-wrap tulajdonságok.

Példa

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

Próbálja ki Ön is →

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

Az indokoló tartalom tulajdonság

Az justify-content tulajdonság a rugalmas elemek igazítására szolgál:

1

2

3

Példa

A center érték a rugalmas elemeket a tároló közepére igazítja:

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

Próbálja ki Ön is →

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

Példa

A flex-start érték a tároló elejére igazítja a rugalmas elemeket (ez az alapértelmezett):

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

Próbálja ki Ön is →

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

Példa

A flex-end érték igazítja a rugalmas elemeket a tároló végén:

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

Próbálja ki Ön is →

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

Példa

A space-around érték a rugalmas elemeket szóközzel jeleníti meg előtte, között, és a sorok után:

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

Próbálja ki Ön is →

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

Példa

A space-between érték megjeleníti a rugalmas elemeket szóközzel a sorok:

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

Próbálja ki Ön is →

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

Az igazítási elemek Tulajdonság

Az align-items tulajdonság a rugalmas elemek igazítására szolgál.

1

2

3

Ezekben a példákban 200 képpont magas tárolót használunk, hogy jobban szemléltessük a align-items tulajdonság.

Példa

A center érték a rugalmas elemeket a tartály:

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

Próbálja ki Ön is →

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

Példa

A flex-start érték igazítja a rugalmas elemeket a tároló tetején:

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

Próbálja ki Ön is →

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

Példa

A flex-end érték igazítja a rugalmas elemeket a tároló alján:

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

Próbálja ki Ön is →

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

Példa

A stretch érték megnyújtja a rugalmas elemeket, hogy kitöltse a tárolót (ez az alapértelmezett):

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

Próbálja ki Ön is →

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

Példa

Az alapvonal érték igazítja a rugalmas elemeket, például az alapvonalakat:

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

Megjegyzés: a példa eltérő betűméretet használ annak demonstrálására, hogy az elemek a szöveges alapvonalhoz igazodnak:

1

2

3

4

Próbálja ki Ön is →

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

Az igazítási tartalom tulajdonság

Az align-content tulajdonság a hajlékony vonalak igazítására szolgál.

1

2

3

4

5

6

7

8

9

10

11

12

Ezekben a példákban egy 600 képpont magas tárolót használunk, a flex-wrap tulajdonságot wrap értékre állítja be, hogy jobban bemutassa az align-content tulajdonságot.

Példa

A space-between érték a rugalmas sorokat egyenlő távolsággal jeleníti meg:

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

Próbálja ki Ön is →

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

Példa

A space-around érték megjeleníti a hajlékony vonalakat szóközzel előtte, közöttük és utánuk:

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

Próbálja ki Ön is →

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

Példa

A stretch érték megnyújtja a hajlékony vonalakat, hogy felvegye a maradékot szóköz (ez az alapértelmezett):

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

Próbálja ki Ön is →

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

Példa

A center érték a rugalmas vonalakat jeleníti meg a tároló közepén:

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

Próbálja ki Ön is →

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

Példa

A flex-start érték a rugalmas sorokat jeleníti meg a tároló elején:

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

Próbálja ki Ön is →

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

Példa

A flex-end érték a rugalmas sorokat jeleníti meg a tároló végén:

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

Próbálja ki Ön is →

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

Tökéletes központosítás

A következő példában egy nagyon gyakori stílusproblémát fogunk megoldani: a tökéletes központosítást.

MEGOLDÁS: Állítsa be a justify-content és az align-items tulajdonságot is középre, és a rugalmas elem tökéletesen középre kerül:

Példa

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

Próbálja ki Ön is →

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

A CSS Flexbox tároló tulajdonságai

Az alábbi táblázat felsorolja a CSS Flexbox tároló összes tulajdonságát:

align-content

Módosítja a flex-wrap tulajdonság viselkedését. Hasonló az igazítási elemekhez, de a rugalmas elemek igazítása helyett a rugalmas vonalakat igazítja

align-items

Függőlegesen igazítja a hajlékony elemeket, ha az elemek nem használják ki a kereszttengelyen az összes rendelkezésre álló helyet

display

Meghatározza a HTML-elemhez használt doboz típusát

flex-direction

Meghatározza a rugalmas elemek irányát egy rugalmas tárolóban

flex-flow

A flex-direction és a flex-wrap gyorsírási tulajdonsága

flex-wrap

Meghatározza, hogy a flexiós elemeket be kell-e burkolni, ha nincs elég hely számukra egy rugalmas sorban

justify-content

Vízszintesen igazítja a rugalmas elemeket, ha az elemek nem használják ki az összes rendelkezésre álló helyet a főtengelyen