CSS: casella di ricerca verrà ridimensiona automaticamente sulla base di dimensioni finestre utilizzando Flexbox

Voglio progettare un layout come sotto immagine:CSS: casella di ricerca verrà ridimensiona automaticamente sulla base di dimensioni finestre utilizzando Flexbox

layout

Come in questo layout, questo è il mio colpo di testa. Il rettangolo nero è alcuni componenti (pulsanti, collegamento ...) con larghezza fissa e il rettangolo rosso è il mio modulo di ricerca.

Voglio che quando l'utente cambia la dimensione delle finestre del browser, il modulo di ricerca sarà più piccolo (in larghezza), fino a qualche valore, apparirà barra di scorrimento orizzontale. Forse la parte difficile è: non so come risolvere "auto-ridimensionamento" in css.

Ecco il mio codice di esempio:

mio HTML:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]--> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Title Here</title> 
    <link type="text/css" rel="stylesheet" href="css/application.css"> 
    <script src="javascripts/pace.js"></script> 
</head> 
<body> 
    <header class="page-head"> 
     <div class="wrapper"> 
      <div class="logo"></div> 
      <form class="form-search" action="#" onsubmit="return false" method="get" name="search_form"> 
       <div class="search-box"></div> 
      </form> 
      <nav class="site-nav"> 
       <span><a href="/" class="site-nav__home"></a></span> 
       <div class="site-nav__item">Home</div> 
       <div class="site-nav__item">Notifications</div> 
       <div class="site-nav__item">Profile</div> 
       <div class="site-nav__button">Add Question</div> 
      </nav> 
     </div> 
    </header> 
</body> 
</html>

mio CSS:

.html { 
    box-sizing: border-box; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

*, *:before, *:after { 
    box-sizing: inherit; 
} 

.page-head { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 45px; 
    width: 100%; 
    font-size: 14px; 
    color: #fff; 
} 

.page-head.wrapper { 
    width: 1020px; 
    margin: 0 auto;  
    /* center horizontally. apply for block level element */ 
    border-bottom: 1px solid #ddd; 
    /* drop shadow effect */ 
    box-shadow: 0 3px 5px -3px rgba(200, 200, 200, 0.3); 
    height: 45px; 
    display: flex; 
    flex-direction: row; 
} 

form { 
    display: block; 
} 

.logo { 
    width: 45px; 
    height: 45px; 
    background: red; 
} 
.form-search { 
    margin: 0; 
    float: none; 
    position: static; 
    height: 27px; 
    background-image: url(../images/search.png); 
} 

.search-box { 
    border-radius: 2px; 
    -webkit-font-smoothing: antialiased; 
    margin-top: 0; 
    padding: 5px; 
    padding-left: 26px; 
    float: none; 
    width: 100%; 
    height: 27px; 
    font-size: 15px; 
    line-height: normal; 
    background: #eee; 
} 

.site-nav { 
    display: flex; 
    flex-direction: row; 
    z-index: 1; 
    margin-left: 20px; 

} 

.site-nav__item { 
    display: block; 
    height: 45px; 
    color: #666; 
    padding: 0 16px; 
    background-repeat: no-repeat; 
    background-position: 10px center; 
    border-bottom: 1px solid transparent; 
}

La prego di dirmi come progettare questo layout usando i CSS. E se possibile, come si può fare usando Flexbox?

Grazie :)

fonte

2015-05-10 Trần Kim Dự

Cosa hai provato finora? Sfortunatamente, gli utenti SO non possono aiutarti senza ulteriori ricerche sull'argomento o sui tuoi tentativi. Dov'è il tuo problema quando si implementa questo componente? – BIW

@BIW Ho modificato la domanda, incluso il codice su cui sto lavorando. Grazie :) –

Flexbox funziona bene per risolvere questo problema. Fondamentalmente vuoi che la casella di ricerca (o il suo elemento di forma) riempia lo spazio disponibile e si riduca se necessario (fino a un certo punto) quando la dimensione della finestra diminuisce.

Gif of flexbox behavior during window resizing

La salsa segreto è quello di dare l'elemento del modulo un flex-grow: 1 dirgli di riempire lo spazio disponibile.

html { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.page-head { 
 
    display: flex; 
 
    align-items: center; /* Makes the nav items and logo appear vertically centered with the search box*/ 
 
    margin: 1.5rem; 
 
} 
 

 
.logo { 
 
    /* Prevent logo from shrinking 
 
    so it doesn't collide when window gets narrow. */ 
 
    flex-shrink: 0; 
 
} 
 

 
.search-form { 
 
    margin: 0 1rem; 
 
    flex-grow: 1; /* <-- THE SECRET SAUCE! */ 
 
    min-width: 18rem; 
 
} 
 

 
.search-box { 
 
    width: 100%; 
 
    padding: .4rem; 
 
    background-color: #ffb; 
 
} 
 

 
.site-nav > ul { 
 
    display: flex; 
 
    margin: 0; 
 
} 
 
.site-nav__item { 
 
    /* Prevent nav items from shrinking 
 
    so they won't collide when window gets narrow. */ 
 
    flex-shrink: 0; 
 
    
 
    list-style-type: none; 
 
    margin: 0 .55rem; 
 
    cursor: pointer; 
 
    /* Prevent multi-word nav items from wrapping. */ 
 
    white-space: nowrap; 
 
}

<header class="page-head"> 
 
    
 
    <div class="logo">Logo</div> 
 

 
    <form class="search-form"> 
 
    <input type="text" class="search-box" 
 
      placeholder="Search (this form fills available space)"> 
 
    </form> 
 

 
    <nav class="site-nav"> 
 
    <ul> 
 
     <li class="site-nav__item">Home</li> 
 
     <li class="site-nav__item">Notifications</li> 
 
     <li class="site-nav__item">Profile</li> 
 
     <li class="site-nav__item">Add Question</li>  
 
    </ul> 
 
    </nav> 
 
</header>

fonte

2015-07-08 14:48:07

Ci sono molti modi per fare questo, io preferisco usare le tabelle, perché hanno già la maggior parte degli stili richiesti - anche se non aggiungere un sacco di html. Ho deciso che sarebbe stato meglio per creare un modello e permette di cambiare le cose, se necessario:

#header{ 
 
    width:100%; 
 
    height:45px; 
 
    table-layout:auto; 
 
} 
 
#header img{ 
 
    width:45px; 
 
    height:45px; 
 
    background-color:red; 
 
    float:left; 
 
} 
 
#header form{ 
 
    float:left; 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    min-width:200px; 
 
} 
 
#header input{ 
 
    width:100%; 
 
    height:45px; 
 
} 
 
#header nav{ 
 
    float:right; 
 
    display:inline-table; 
 
    vertical-align:middle; 
 
} 
 
#header a{ 
 
    padding:10px; 
 
    background-color:black; 
 
    color:white; 
 
    vertical-align:middle; 
 
}

<table id="header"> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <img id="logo"/> 
 
\t \t </td> 
 
\t \t <td style="width: 100%;"> 
 
\t \t \t <form> 
 
\t \t \t \t <input type="text" name ="search" id="search" placeholder="Search"/> 
 
\t \t \t </form> 
 
\t \t </td> 
 
\t \t <td style="white-space:nowrap;"> 
 
\t \t \t <nav> 
 
\t \t \t \t <a href="#">Home</a> 
 
\t \t \t \t <a href="#">Notifications</a> 
 
\t \t \t \t <a href="#">Profile</a> 
 
\t \t \t \t <a href="#">Add question</a> 
 
\t \t \t </nav> 
 
\t \t </td> 
 
\t </tr> 
 
</table>

Scuse, ho provato mantenere la mia struttura come simile al vostro, come ho potuto, ma ci sono una fiera poche differenze. In ogni caso, spero che questo aiuti!

fonte

2015-05-17 12:46:45 jaunt

CSS: casella di ricerca verrà ridimensiona automaticamente sulla base di dimensioni finestre utilizzando Flexbox

risposta

Problemi correlati