CSS max-inline-size ιδιότητα

Προηγούμενη σελίδα max-height
Επόμενη σελίδα max-width

Ορισμός και χρήση

max-inline-size Η ιδιότητα καθορίζει το μέγιστο μέγεθος του στοιχείου στην κατεύθυνση της γραμμής.

Αν το μέγεθος του περιεχομένου στην κατεύθυνση της γραμμής είναι μικρότερο από το μέγιστο μέγεθος, τότε max-inline-size Οι τιμές ιδιοτήτων δεν λειτουργούν.

Αν το μέγεθος του περιεχομένου στην κατεύθυνση της γραμμής είναι μεγαλύτερο από το μέγιστο μέγεθος, θα εφαρμοστεί max-inline-size τιμές ιδιοτήτων.

Σημείωση:σχετικές ιδιότητες CSS writing-mode Ορίζει την κατεύθυνση της γραμμής, κάτι που επηρεάζει max-inline-size Τα αποτελέσματα των ιδιοτήτων. Για τις σελίδες σε αγγλική γλώσσα, η κατεύθυνση του κύριου είναι προς τα κάτω και η κατεύθυνση της γραμμής είναι από αριστερά προς τα δεξιά.

CSS max-inline-size ιδιότητες με τις ιδιότητες CSS max-height και max-width Πολύ παρόμοια, αλλά max-inline-size Η ιδιότητα εξαρτάται από την κατεύθυνση της γραμμής.

Παράδειγμα

Παράδειγμα 1

div {
  max-inline-size: 60px;
}

Προσπαθήστε το προσωπικά

Παράδειγμα 2: Μέθοδος γραφής

Ρυθμίστε το μέγεθος του στοιχείου <div> στο πλάτος της γραμμής σε 60 pixel: writing-mode Όταν η τιμή της ιδιότητας είναι vertical-rl, η κατεύθυνση της γραμμής μετατρέπεται από πλάγια προς κάτω, κάτι που επηρεάζει max-inline-size Πώς λειτουργεί η ιδιότητα:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Προσπαθήστε το προσωπικά

Παράδειγμα 3: Max-inline-size κ.λπ. Inline-size

Παρατηρήστε το στοιχείο <div> (inline-size 100px) και έναν άλλο στοιχείο <div> (max-inline-size διαφορετικές αντιδράσεις στη μεταβολή του μεγέθους του περιεχομένου (100px):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Προσπαθήστε το προσωπικά

Γλώσσα CSS

max-inline-size: αυτομάτως|μήκος|initial|εκδοχικότητα;

Τιμή ιδιότητας

Τιμή	Περιγραφή
αυτόματα	Προεπιλεγμένη. Η προεπιλεγμένη τιμή max-inline-size του στοιχείου.
μήκος	Χρησιμοποιείται ομοίως με τις μονάδες px, pt, cm κ.λπ. Δείτε:Μονάδες CSS.
%	Ορίζει το ποσοστό του μεγέθους σε σχέση με το γονικό στοιχείο στον αντίστοιχο άξονα.
initial	Ρυθμίστε αυτή την ιδιότητα στην προεπιλεγμένη τιμή. Δείτε: initial.
εκδοχικότητα	Εκδίδεται από το γονικό στοιχείο. Δείτε: εκδοχικότητα.

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή:	αυτόματα
Εκδοχικότητα:	Όχι
Δημιουργία αニμάτισης:	Υποστηρίζεται. Δείτε:Ιδιότητες της αニμάτισης.
Έκδοση:	CSS3
Γλώσσα JavaScript:	object.style.maxInlineSize="60px"