CSS: pole wyszukiwania zostanie automatycznie zmienić rozmiar bazy rozmiaru okien przy użyciu schematu flexbox

Chcę zaprojektować układ jak poniżej obrazka:CSS: pole wyszukiwania zostanie automatycznie zmienić rozmiar bazy rozmiaru okien przy użyciu schematu flexbox

layout

Jak w tym układzie, to jest mój nagłówek. Czarny prostokąt to niektóre komponenty (przyciski, łącza ...) o stałej szerokości, a czerwony prostokąt to moja wyszukiwarka.

Chcę, gdy użytkownik zmieni rozmiar okna przeglądarki, formularz wyszukiwania będzie mniejszy (w szerokości), aż do pewnej wartości, pojawi się poziomy pasek przewijania. Może najtrudniejsze jest: nie wiem, jak rozwiązać "auto-resize" w css.

Oto mój przykładowy kod:

mój 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>

mój 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; 
}

Proszę mi powiedzieć, jak zaprojektować ten układ za pomocą CSS. A jeśli to możliwe, w jaki sposób można zrobić za pomocą Flexbox?

Dzięki :)

Źródło

2015-05-10 Trần Kim Dự

Co próbowałeś do tej pory? Niestety użytkownicy SO nie mogą Ci pomóc bez dalszych badań na temat lub własnych prób. Gdzie jest twój problem przy wdrażaniu tego komponentu? – BIW

@BIW Edytowałem może pytanie, w tym kod, nad którym pracuję. dzięki :) –

Flexbox działa dobrze, aby rozwiązać ten problem. Zasadniczo chcesz, aby pole wyszukiwania (lub jego element formularza) wypełniało dostępną przestrzeń i zmniejszało się w miarę potrzeby (do pewnego punktu), gdy zmniejszy się rozmiar okna.

Gif of flexbox behavior during window resizing

Sekret sos jest dać element tworzą flex-grow: 1, aby poinformować go, aby wypełnić dostępną przestrzeń.

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>

Źródło

2015-07-08 14:48:07

Istnieje wiele sposobów, aby to zrobić, wolę za pomocą tabel, ponieważ mają już większość potrzebnych stylów - nawet jeśli to nie dodać wiele html. Zdecydowałem, że najlepiej byłoby, aby utworzyć szablon i pozwala zmienić ten stan rzeczy jako konieczne:

#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>

Przepraszamy, Próbowałem zachowując moje strukturę jako podobne do Ciebie, jak tylko mogłem, ale istnieje uzasadniona kilka różnic. W każdym razie mam nadzieję, że to pomoże!

Źródło

2015-05-17 12:46:45 jaunt

CSS: pole wyszukiwania zostanie automatycznie zmienić rozmiar bazy rozmiaru okien przy użyciu schematu flexbox

Odpowiedz

Powiązane problemy