FullWidth Input-Elemente

Oftmals will man in der Web-Welt einige Elemente in einem Container auf den vollen verfügbaren Platz erweitern und andere hingegen auf z. B. eine fixe Größe setzen.
Durch das neue Flexbox-Modell von CSS3 haben wir nun ganz einfach die Mittel dies zu realisieren. Dazu benötigt man im Prinzip nicht mehr als 3 Zeilen CSS ;)

“The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.”

 

Für das folgende Beispiel verwende ich folgende HTML-Struktur:

  1: <div class="wrapper">
  2:     
  3:   <div class="row">
  4:     
  5:     <label>Name</label>
  6:     <input type="text" placeholder="your Name" />
  7:     
  8:   </div>
  9:     
 10: </div>

Hierfür könnte man natürlich beliebige HTML-Elemente verwenden!

Und hier dann das Endergebnis:

2014-05-15_15-30-18

Wie man sehen kann, nimmt das Label nur einen kleinen Teil der gesamten Zeile ein, und der Rest wird durch die Textbox ausgefüllt.

Und nun zum interessanten Teil… CSS :) (hier mit LESS-CSS)

  1: .row {
  2:   border-radius: 7px;
  3:   background: #323232;
  4:   padding: 10px 5px;
  5:   animation: resizeRow 7s alternate infinite;
  6:   width: 500px;
  7:   

//Ensures

that the row is centered on the screen
  8:   margin: auto;
  9:   

//--!

Flex-Container
 10:   display: flex;
 11:   
 12:   label {
 13:     color: #eee;
 14:     text-align: right;
 15:     padding-right: 10px;
 16:     

//--!

Flex-Item
 17:     flex: 1 70px;
 18:   }
 19:   
 20:   input {
 21:     margin-right: 10px;
 22:    

//--!

Flex-Item
 23:     flex: 1 100%;
 24:   }
 25: }

 

 

 

Im Prinzip wären nur 3 CSS-Deklarationen notwendig. Der Rest ist Schnick-Schnack, damit es gut aussieht.

  • Die Größe des Flex-Containers (Parent)
  • Parent-Element als Flex-Container mit ‘display: flex;’ deklarieren
  • Child-Elemente (Flex-Childs) mit ‘flex: 1 XXXpx; –ms-flex: 1 XXXpx;’ deklarieren

Schon nimmt das input-Element 100 % des verfügbaren Platzes des Flex-Containers ein. Perfekt geeignet für Responsive-Design.

Hier noch ein Link zur Demo.

Kommentare sind geschlossen