CSS Flexbox Container

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Γονικό στοιχείο (κοντέινερ)

Όπως προσδιορίσαμε στο προηγούμενο κεφάλαιο, αυτό είναι ένα flex container (η μπλε περιοχή) με τρία flex στοιχεία:

1

2

3

Το flex container γίνεται ευέλικτο ρυθμίζοντας την ιδιότητα display σε flex:

Παράδειγμα

 .flex-container {
  
  display: flex;
}

Δοκιμάστε το μόνοι σας →

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

Οι ιδιότητες του εύκαμπτου δοχείου είναι:

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

Η ιδιότητα flex-direction

Η ιδιότητα flex-direction καθορίζει την κατεύθυνση προς την οποία το κοντέινερ θέλει να στοιβάξει τα ευέλικτα στοιχεία.

1

2

3

Παράδειγμα

Η τιμή στήλης στοιβάζει τα ευέλικτα στοιχεία κάθετα (από πάνω προς τα κάτω):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή column-reverse στοιβάζει τα flex στοιχεία κάθετα (αλλά από κάτω προς τα πάνω):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή σειρά στοιβάζει τα ευέλικτα στοιχεία οριζόντια (από αριστερά προς τα δεξιά):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή row-reverse στοιβάζει τα flex στοιχεία οριζόντια (αλλά από τα δεξιά προς τα αριστερά):

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

Δοκιμάστε το μόνοι σας →

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

Η ιδιότητα flex-wrap

Η ιδιότητα flex-wrap καθορίζει εάν τα flex στοιχεία θα πρέπει να αναδιπλώνονται ή όχι.

Τα παρακάτω παραδείγματα έχουν 12 ευέλικτα στοιχεία, για καλύτερη επίδειξη του ιδιότητα flex-wrap.

1

2

3

4

5

6

7

8

9

10

11

12

Παράδειγμα

Η τιμή wrap καθορίζει ότι τα flex στοιχεία θα αναδιπλωθούν εάν είναι απαραίτητο:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή nowrap καθορίζει ότι τα ευέλικτα στοιχεία δεν θα αναδιπλωθούν (αυτό είναι προεπιλογή):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή wrap-reverse καθορίζει ότι τα ευέλικτα στοιχεία θα αναδιπλωθούν εάν χρειάζεται, με αντίστροφη σειρά:

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

Δοκιμάστε το μόνοι σας →

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

Η ιδιότητα flex-flow

Η ιδιότητα flex-flow είναι μια ιδιότητα συντομογραφίας για τον ορισμό και των δύο flex-direction και Ιδιότητες flex-wrap.

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Η ιδιότητα justify-content

Η ιδιότητα justify-content χρησιμοποιείται για την ευθυγράμμιση των ευέλικτων στοιχείων:

1

2

3

Παράδειγμα

Η τιμή center ευθυγραμμίζει τα ευέλικτα στοιχεία στο κέντρο του κοντέινερ:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή flex-start ευθυγραμμίζει τα ευέλικτα στοιχεία στην αρχή του κοντέινερ (αυτό είναι προεπιλογή):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή flex-end ευθυγραμμίζει τα flex στοιχεία στο τέλος του κοντέινερ:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή space-around εμφανίζει τα ευέλικτα στοιχεία με κενό διάστημα πριν, μεταξύ, και μετά τις γραμμές:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή space-between εμφανίζει τα ευέλικτα στοιχεία με κενό διάστημα μεταξύ των γραμμές:

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

Δοκιμάστε το μόνοι σας →

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

Η ιδιότητα στοίχισης στοιχείων

Η ιδιότητα align-items χρησιμοποιείται για την ευθυγράμμιση των ευέλικτων στοιχείων.

1

2

3

Σε αυτά τα παραδείγματα χρησιμοποιούμε ένα κοντέινερ ύψους 200 pixel, για να δείξουμε καλύτερα το align-items ιδιοκτησία.

Παράδειγμα

Η τιμή center ευθυγραμμίζει τα ευέλικτα στοιχεία στη μέση του δοχείο:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή flex-start ευθυγραμμίζει τα flex στοιχεία στο επάνω μέρος του κοντέινερ:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή flex-end ευθυγραμμίζει τα flex στοιχεία στο κάτω μέρος του κοντέινερ:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή stretch επεκτείνει τα ευέλικτα στοιχεία για να γεμίσουν το κοντέινερ (αυτό είναι προεπιλογή):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή βασικής γραμμής ευθυγραμμίζει τα ευέλικτα στοιχεία, όπως τις ευθυγραμμίσεις των γραμμών βάσης τους:

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

Σημείωση: το παράδειγμα χρησιμοποιεί διαφορετικό μέγεθος γραμματοσειράς για να δείξει ότι τα στοιχεία ευθυγραμμίζονται με τη γραμμή βάσης του κειμένου:

1

2

3

4

Δοκιμάστε το μόνοι σας →

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

Η ιδιότητα align-content

Η ιδιότητα align-content χρησιμοποιείται για την ευθυγράμμιση των ευέλικτων γραμμών.

1

2

3

4

5

6

7

8

9

10

11

12

Σε αυτά τα παραδείγματα χρησιμοποιούμε ένα κοντέινερ ύψους 600 pixel, με το Η ιδιότητα flex-wrap ορίστηκε σε wrap, για καλύτερη επίδειξη της ιδιότητας align-content.

Παράδειγμα

Η τιμή space-between εμφανίζει τις ευέλικτες γραμμές με ίσο διάστημα μεταξύ τους:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή space-around εμφανίζει τις ευέλικτες γραμμές με κενό πριν, μεταξύ και μετά από αυτά:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή stretch επεκτείνει τις ευέλικτες γραμμές για να καταλάβουν τις υπόλοιπες space (αυτό είναι προεπιλεγμένο):

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή center εμφανίζει τις ευέλικτες γραμμές στη μέση του κοντέινερ:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή flex-start εμφανίζει τις ευέλικτες γραμμές στην αρχή του κοντέινερ:

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα

Η τιμή flex-end εμφανίζει τις ευέλικτες γραμμές στο τέλος του κοντέινερ:

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

Δοκιμάστε το μόνοι σας →

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

Τέλειο κεντράρισμα

Στο παρακάτω παράδειγμα θα λύσουμε ένα πολύ συνηθισμένο πρόβλημα στυλ: τέλειο κεντράρισμα.

ΛΥΣΗ: Ορίστε και τις δύο ιδιότητες justify-content και align-items σε κέντρο και το στοιχείο flex θα είναι τέλεια κεντραρισμένο:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Ο παρακάτω πίνακας παραθέτει όλες τις ιδιότητες του CSS Flexbox Container:

align-content

Τροποποιεί τη συμπεριφορά της ιδιότητας flex-wrap. Είναι παρόμοιο με τα στοιχεία στοίχισης, αλλά αντί να ευθυγραμμίζει ευέλικτα στοιχεία, ευθυγραμμίζει ευέλικτες γραμμές

align-items

Ευθυγραμμίζει κάθετα τα ευέλικτα στοιχεία όταν τα στοιχεία δεν χρησιμοποιούν όλο τον διαθέσιμο χώρο στον εγκάρσιο άξονα

display

Καθορίζει τον τύπο του πλαισίου που χρησιμοποιείται για ένα στοιχείο HTML

flex-direction

Καθορίζει την κατεύθυνση των εύκαμπτων αντικειμένων μέσα σε ένα εύκαμπτο δοχείο

flex-flow

Μια συντομογραφία ιδιότητας για flex-direction και flex-wrap

flex-wrap

Καθορίζει εάν τα ευέλικτα στοιχεία θα πρέπει να τυλίγονται ή όχι, εάν δεν υπάρχει αρκετός χώρος για αυτά σε μία ευέλικτη γραμμή

justify-content

Ευθυγραμμίζει οριζόντια τα ευέλικτα στοιχεία όταν τα στοιχεία δεν χρησιμοποιούν όλο τον διαθέσιμο χώρο στον κύριο άξονα