Question

我想设计一个如下图所示的布局：

layout

在此布局中，这是我的标题。黑色矩形是一些固定宽度的组件（按钮，链接...），红色矩形是我的搜索表单。

我希望当用户更改浏览器窗口的大小时，搜索表单会更小（宽度），直到某个值，会出现水平滚动条。也许困难的部分是：我不知道如何解决＆＃34;自动调整大小＆＃34;在css。

以下是我的示例代码：

我的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>

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

请告诉我如何使用CSS设计此布局。如果可能的话，如何使用Flexbox？

谢谢：）

Answer 1

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

Gif of flexbox behavior during window resizing

秘诀就是给表单元素flex-grow: 1告诉它填充可用空间。

＆＃13;

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;  
}

＆＃13;

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

＆＃13;

Answer 2

有很多方法可以做到这一点，我更喜欢使用表，因为它们已经拥有大部分所需的样式 - 即使它确实添加了很多html。我决定最好创建一个模板，让你根据需要改变一些事情：

＆＃13;

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

＆＃13;

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

＆＃13;

道歉，我尽量保持我的结构与你的结构尽可能相似，但存在一些差异。无论如何，我希望这有帮助！

CSS：搜索框将根据窗口大小使用Flexbox

2 个答案: