Λύση[Edited]:
Επειδή χρησιμοποιώ bootstrap, βάζει ένα έξτρα margin-bottom στα <label>. Έπρεπε να το αφαιρέσω.
Υπάρχει ένα κενό στο ύψος του flexbox (κόκκινο χρώμα) μεταξύ των flex items (title και x) και του bottom border. Δοκίμασα να του δώσω padding 0 αλλά πάλι υπάρχει.
Δεν μπορώ να βρω για ποιον λόγο συμβαίνει αυτό.
[Edited]: Παρατήρησα ότι αυτό συμβαίνει επειδή χρησιμοποιώ bootstrap. Το θέμα είναι σε ποιο element προσθέτει η bootstrap
κάποιο padding ή margin. Αν το βρω θα σας ενημερώσω.
HTML:
Κώδικας:<div class="alex-modal"> <div class="alex-modal-content"> <div class="alex-modal-titlebar"> <label class="alex-modal-title">Title</label> <label [class]="m_env.icons.x" [ngClass]="{'alex-modal-x':true}"></label> </div> <input type="text" class="form-control"> <input type="text" class="form-control"> <input type="text" class="form-control"> <input type="text" class="form-control"> </div> </div>
CSS:
Κώδικας:* { box-sizing: border-box; } html, body { margin: 0; } .alex-modal { position: fixed; top : 0; left : 0; width : 100%; height : 100vh; } .alex-modal-content { position : relative; max-width : 80%; max-height : 80vh; margin-left : auto; margin-right : auto; border-style : solid; border-radius : 1rem; padding : 1rem; padding-top : 0; top : 50%; transform : translateY(-50%); background-color: rgba(255, 255, 255, 0.8); } .alex-modal-titlebar { display : -webkit-box; display : -moz-box; display : -ms-flexbox; display : -webkit-flex; display : flex; border-bottom: solid; margin-bottom: 1rem; background-color: red; } .alex-modal-title { flex-grow : 2; font-size : 1.5rem; font-weight: bold; font-style : italic; text-align : center; background-color: orange; } .alex-modal-x { flex-grow : 0; text-align: right; align-self: center; background-color: blue; }
Εμφάνιση 1-1 από 1
-
06-03-20, 17:39 CSS Flex: Ξέρει κανείς γιατί συμβαίνει αυτό; #1
Τελευταία επεξεργασία από το μέλος babaliaris : 06-03-20 στις 18:50.
Bookmarks