CSS3--Flex弹性盒子布局: 实例篇-输入框的布局 & 悬挂式布局

Posted Z && Y

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3--Flex弹性盒子布局: 实例篇-输入框的布局 & 悬挂式布局相关的知识,希望对你有一定的参考价值。

01: 弹性盒子模型介绍 & 游览器调试样式(简单介绍)
02: 弹性布局和传统布局响应对比
03: 使用弹性盒子模型布局微信客户端
04: 声明弹性盒子 & 容器的属性
05: flex项目的属性
06: 实例篇-骰子布局
07: 实例篇-网格布局
08: 实例篇-圣杯布局
09: 实例篇-输入框的布局 & 悬挂式布局
10: 实例篇-固定的底栏 & 流式布局
11: CSS3 flex弹性布局重点


1. Flex弹性盒子布局: 实例篇-输入框的布局

我们常常需要在输入框的前方添加提示,后方添加按钮。
在这里插入图片描述


html代码:

<div class="InputAddOn">
    <span class="InputAddOn-item">...</span>
    <input class="InputAddOn-field">
    <button class="InputAddOn-item">...</button>
</div>

css代码:

        .InputAddOn {
            display: flex;
        }

        .InputAddOn-field {
            flex: 1;
        }

运行结果:
在这里插入图片描述


2. Flex弹性盒子布局: 实例篇-悬挂式布局


有时,主栏的左侧或右侧,需要添加一个图片栏。
在这里插入图片描述
html代码:

<div class="Media">
    <img class="Media-figure" src="" alt="">
    <p class="Media-body">...</p>
</div>

css代码:

        .Media {
            display: flex;
            align-items: flex-start;
            background-color: #ccc;
        }

        .Media-figure {
            margin-right: 1em;
            background-color: red;
        }

        .Media-body {
            flex: 1;
            background-color: orange;
        }

运行结果:
在这里插入图片描述



以上是关于CSS3--Flex弹性盒子布局: 实例篇-输入框的布局 & 悬挂式布局的主要内容,如果未能解决你的问题,请参考以下文章

CSS3--Flex弹性盒子布局: 实例篇-网格布局

CSS3--Flex弹性盒子布局: 实例篇-骰子布局

CSS3--Flex弹性盒子布局: flex项目的属性

CSS3--Flex弹性盒子布局: 实例篇-固定的底栏 & 流式布局

CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性

CSS3--Flex弹性盒子布局:弹性布局和传统布局响应对比