Στοιχεία CSS Flexbox

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

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

Παιδικά στοιχεία (αντικείμενα)

Τα άμεσα θυγατρικά στοιχεία ενός εύκαμπτου κοντέινερ γίνονται αυτόματα ευέλικτα (flex) αντικείμενα.

1

2

3

4

Το παραπάνω στοιχείο αντιπροσωπεύει τέσσερα μπλε εύκαμπτα αντικείμενα μέσα σε ένα γκρι εύκαμπτο δοχείο.

Παράδειγμα

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

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

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

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

<h1>Flexible Items</h1>

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

<p>All direct children of a flexible container becomes flexible items.</p>

</body>
</html>

Οι ιδιότητες ευέλικτου στοιχείου είναι:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Η ιδιοκτησία της παραγγελίας

Η ιδιότητα order καθορίζει τη σειρά των ευέλικτων στοιχείων.

1

2

3

4

Το πρώτο ευέλικτο στοιχείο στον κώδικα δεν χρειάζεται να εμφανίζεται ως το πρώτο στοιχείο στη διάταξη.

Η τιμή παραγγελίας πρέπει να είναι αριθμός, η προεπιλεγμένη τιμή είναι 0.

Παράδειγμα

Η ιδιότητα order μπορεί να αλλάξει τη σειρά των ευέλικτων στοιχείων:

<div class="flex-container">
  <div style="order: 3">1</div>
  
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  
  <div style="order: 1">4</div>
</div>

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

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

<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

</body>
</html>

Το ακίνητο flex-grow

Η ιδιότητα flex-grow καθορίζει πόσο θα αυξηθεί ένα flex στοιχείο σε σχέση με τα υπόλοιπα flex στοιχεία.

1

2

3

Η τιμή πρέπει να είναι αριθμός, η προεπιλεγμένη τιμή είναι 0.

Παράδειγμα

Κάντε το τρίτο ευέλικτο αντικείμενο να μεγαλώσει οκτώ φορές πιο γρήγορα από τα άλλα flex αντικείμενα:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 
  8">3</div> 
</div>

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

</body>
</html>

Το flex-shrink Property

Η ιδιότητα flex-shrink καθορίζει πόσο θα συρρικνωθεί ένα flex στοιχείο σε σχέση με τα υπόλοιπα flex στοιχεία.

1

2

3

4

5

6

7

8

9

10

Η τιμή πρέπει να είναι αριθμός, η προεπιλεγμένη τιμή είναι 1.

Παράδειγμα

Μην αφήνετε το τρίτο ευέλικτο στοιχείο να συρρικνώνεται τόσο πολύ όσο τα άλλα εύκαμπτα αντικείμενα:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 
  0">3</div>
    <div>4</div>
  <div>5</div>
  <div>6</div>
  
  <div>7</div>
  <div>8</div>
  <div>9</div>
  
  <div>10</div>
</div>

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

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

<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

</body>
</html>

Η ευέλικτη ιδιοκτησία

Η ιδιότητα flex-basis καθορίζει το αρχικό μήκος ενός ευέλικτου στοιχείου.

1

2

3

4

Παράδειγμα

Ορίστε το αρχικό μήκος του τρίτου ευέλικτου στοιχείου σε 200 pixel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
    <div>4</div>
</div>

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

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

<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>

</body>
</html>

Το flex Property

Η ιδιότητα flex είναι μια συντομογραφία για το Ιδιότητες flex-grow, flex-shrink και flex-basis.

Παράδειγμα

Κάντε το τρίτο εύκαμπτο αντικείμενο να μην αναπτύσσεται (0), να μην συρρικνώνεται (0) και με ένα αρχικό μήκος 200 pixel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 
  0 0 200px">3</div>
    <div>4</div>
</div>

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

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

<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

</body>
</html>

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

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

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

1

2

3

4

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

Παράδειγμα

Ευθυγραμμίστε το τρίτο ευέλικτο στοιχείο στη μέση του κοντέινερ:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: 
  center">3</div>
    <div>4</div>
</div>

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

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

<h1>The align-self Property</h1>

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

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

Παράδειγμα

Ευθυγραμμίστε το δεύτερο ευέλικτο στοιχείο στο επάνω μέρος του κοντέινερ και το τρίτο εύκαμπτο στοιχείο στο κάτω μέρος του δοχείου:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: 
  flex-start">2</div>
    <div style="align-self: 
  flex-end">3</div>
    <div>4</div>
</div>

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

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

<h1>The align-self Property</h1>

<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

Οι ιδιότητες στοιχείων CSS Flexbox

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

align-self

Καθορίζει τη στοίχιση για ένα ευέλικτο στοιχείο (παρακάμπτει την ιδιότητα align-items του flex κοντέινερ)

flex

Μια συντομογραφία για το flex-grow, flex-shrink και το flex-base ιδιότητες

flex-basis

Καθορίζει το αρχικό μήκος ενός ευέλικτου στοιχείου

flex-grow

Καθορίζει πόσο θα αυξηθεί ένα flex αντικείμενο σε σχέση με τα υπόλοιπα flex στοιχεία μέσα στο ίδιο κοντέινερ

flex-shrink

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

order

Καθορίζει τη σειρά των ευέλικτων αντικειμένων μέσα στο ίδιο κοντέινερ