CSS Flexbox (Flexible Box)

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

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

1

2

3

4

5

6

7

8

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

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

Πριν από τη λειτουργική μονάδα Flexbox Layout, υπήρχαν τέσσερις λειτουργίες διάταξης:

Block

Σαν μπλοκ, για ενότητες σε μια ιστοσελίδα

Inline

Ενσωματωμένη, για κείμενο

Table

Πίνακας, για δεδομένα δισδιάστατου πίνακα

Positioned

Τοποθετημένο, για ρητή θέση ενός στοιχείου

Η μονάδα Flexible Box Layout Module, διευκολύνει τον σχεδιασμό ευέλικτης απόκρισης δομής διάταξης χωρίς χρήση float ή τοποθέτησης.

Υποστήριξη προγράμματος περιήγησης

Οι ιδιότητες flexbox υποστηρίζονται σε όλα τα σύγχρονα προγράμματα περιήγησης.

29.0 11.0 22.0 10 48

Στοιχεία Flexbox

Για να ξεκινήσετε να χρησιμοποιείτε το μοντέλο Flexbox, πρέπει πρώτα να ορίσετε ένα flex container.

1

2

3

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

Παράδειγμα

Ένα flex δοχείο με τρία flex αντικείμενα:

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

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

<!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 δοχεία και τα flex αντικείμενα στα επόμενα κεφάλαια.