html – CSS：搜索框将根据Windows大小使用Flexbox自动调整大小_html-js-css

概述我想设计一个如下图所示的布局：在这个布局中,这是我的标题.黑色矩形是一些固定宽度的组件(按钮,链接…),红色矩形是我的搜索表单. 我想当用户更改浏览器窗口的大小时,搜索表单会更小(宽度),直到某个值,会出现水平滚动条.也许困难的部分是：我不知道如何在CSS中解决“自动调整大小”. 这是我的示例代码：我的HTML： <!--[if lt IE 7 ]> <html class="ie6"> <! 我想设计一个如下图所示的布局：

在这个布局中,这是我的标题.黑色矩形是一些固定宽度的组件(按钮,链接…),红色矩形是我的搜索表单.

我想当用户更改浏览器窗口的大小时,搜索表单会更小(宽度),直到某个值,会出现水平滚动条.也许困难的部分是：我不知道如何在CSS中解决“自动调整大小”.

这是我的示例代码：

我的HTML：

<!--[if lt IE 7 ]> <HTML > <![endif]--><!--[if IE 7 ]>    <HTML > <![endif]--><!--[if IE 8 ]>    <HTML > <![endif]--><!--[if IE 9 ]>    <HTML > <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <HTML > <!--<![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 >        <div >            <div ></div>            <form  action="#" onsubmit="return false" method="get" name="search_form">                <div ></div>              </form>            <nav >                <span><a href="/" ></a></span>                <div >Home</div>                <div >Notifications</div>                <div >Profile</div>                <div >Add Question</div>            </nav>        </div>    </header></body> </HTML>

我的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,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;}

请告诉我如何使用CSS设计此布局.如果可能的话,如何使用FlexBox？

谢谢：)

解决方法 FlexBox可以很好地解决这个问题.您基本上希望搜索框(或其表单元素)填充可用空间,并在窗口大小减小时根据需要缩小(直到某个点).

秘诀就是给表单元素一个flex-grow：1来告诉它填充可用的空间.

HTML {  Font-family: Arial,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 >   <div >logo</div>  <form >    <input type="text"             placeholder="Search   (this form fills available space)">  </form>  <nav >    <ul>      <li >Home</li>      <li >Notifications</li>      <li >Profile</li>      <li >Add Question</li>          </ul>  </nav></header>

总结

以上是内存溢出为你收集整理的html – CSS：搜索框将根据Windows大小使用Flexbox自动调整大小全部内容，希望文章能够帮你解决html – CSS：搜索框将根据Windows大小使用Flexbox自动调整大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1078002.html