采用flex布局实现home主页的搜索框

最新推荐文章于 2025-07-13 03:27:16 发布

转载最新推荐文章于 2025-07-13 03:27:16 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lanyb009/p/9250295.html

本文介绍了一种使用Flex布局实现导航栏元素自动居中的方法，并详细解释了代码中的关键CSS属性，如flex、float、line-height等。此外还探讨了不同情况下的垂直居中方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）先放示例代码，即：

 1 <template>
 2   <div class="header">
 3     <div class="header-left">
 4       <Icon type="chevron-left"></Icon>
 5     </div>
 6     <div class="header-input">
 7       <Icon type="search"></Icon>
 8       输入城市/景点/游玩主题
 9     </div>
10     <div class="header-right">
11       北京
12       <Icon type="arrow-down-b"></Icon>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18 export default {
19   name: 'HomeHeader'
20 }
21 </script>
22 
23 <style lang="stylus" scoped>
24   .header
25     display: flex
26     background: #00bcd4
27     width: 100%
28     height: 1.95rem
29     .header-left
30       width: 2rem
31       float: left
32       text-align: center
33       line-height: 1.95rem
34       font-size: 1.5rem
35     .header-right
36       float: right
37       width: 3rem
38       text-align: center
39       line-height: 1.95rem
40       font-size: .8rem
41     .header-input
42       flex: 1
43       background: #fff
44       height: 1.7rem
45       line-height: 1.7rem
46       font-size: .7rem
47       padding: 0 .6rem
48       border-radius: .5rem
49       margin: auto 0;
50 </style>

（2）首先，在父元素中采用flex布局，然后左子元素采用向左浮动，右元素采用向右浮动，而中间元素设置flex为1，即在左右元素宽度确定的情况下，剩下的宽度由中间部分占领。

（3）当父元素的高度等于子元素的行高时，子元素会实现上下自动居中；（只试用只有一行的情况下）

（4）采用margin: auto 0也能实现上下自动居中，但他是相对父元素的高度而言的。

（5）padding是相对自己移动的。而margin是相对别人移动的。

以下为效果图：

转载于:https://www.cnblogs.com/lanyb009/p/9250295.html