logo标签列表

CSS：使用Flexbox，搜索框将根据窗口大小自动调整大小

htmlcssflexbox
5

我希望设计如下图所示的布局：

layout

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

当用户改变浏览器窗口的大小时，我希望搜索表单会变得更小（宽度），直到某个值，然后出现水平滚动条。也许最难的部分是：我不知道如何用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实现呢？
谢谢 :)
你目前尝试了什么？很遗憾，如果没有进一步研究该主题或自己的尝试，SO用户无法帮助您。在实现此组件时，您遇到了什么问题？ - BradleyIW
@BIW 我已经编辑了我的问题，包括我正在处理的代码。谢谢 :) - Trần Kim Dự
2个回答
7

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

Gif of flexbox behavior during window resizing

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

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>

1

有很多方法可以做到这一点，我更喜欢使用表格，因为它们已经具备了大部分所需的样式 - 即使它会增加很多html。我决定最好创建一个模板，让您根据需要更改：

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

抱歉，我尽可能地保持了与您相似的结构，但仍然存在一些不同之处。无论如何，希望这能有所帮助！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接