[CSS]Flex布局制作搜索框Demo

最新推荐文章于 2022-11-21 19:32:50 发布

iChangebaobao

最新推荐文章于 2022-11-21 19:32:50 发布

阅读量761

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/iChangebaobao/article/details/102957407

版权

CSS 同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

参考：Flexbox 布局的最简单表单
HTML

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 布局小demo</title>
    <style>
        .formbox {
            display:-webkit-flex;
            display: flex;
            justify-content: center;/*项目在主轴上的对齐方式*/
            flex-direction:row; /*决定主轴的方向（即项目的排列方向）*/
            flex-wrap:nowrap;  /*换行*/
            /*flex-flow:row wrap;上面两个属性的缩写*/
            align-items: stretch;/*定义项目在交叉轴上如何对齐*/
            align-content: center;/*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用*/
        }
         .input-text1{
            order:0;/*定义项目的排列顺序。数值越小，排列越靠前，默认为0.*/
           /* flex-grow:1;定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。默认为0.*/
            flex-shrink:1;/*定义了项目的缩小比例，默认为1，即如果空间不足，改项目将缩小*/
            flex-basis:auto;/*定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小*/
            flex:3 1 auto;/*是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto*/
            align-self:center;/*允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch*/
            border: 1px solid #3BADC9;
            border-right: none;
            border-radius: 5px 0px 0px 5px;
            height: 30px;
            background: #fff;
         }
         .btn{
            background: #3BADC9;
            border: 1px solid #3BADC9;
            color: #fff;
            border-radius: 0px 5px 5px 0px;
            font-size: 1rem;
            flex:2;
         }
    </style>
</head> 
<body>
    <div id="app" v-cloak>
        <form action="" class="formbox"> 
            <input type="text" class="input-text1">
            <input type="button" class="btn" value="搜索"> 
        </form>
    </div> 
</body>

</html>

效果：
在这里插入图片描述

iChangebaobao

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
[CSS]Flex布局制作搜索框Demo

HTML<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫