使用弹性盒实现多种常见布局

已于 2022-08-05 16:19:07 修改
阅读量289 收藏 2
点赞数
分类专栏： css 文章标签： css html css3
于 2022-06-28 17:41:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40864647/article/details/125503973
版权
使用弹性盒实现多种常见布局
一、左侧定宽，右侧响应式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .slider {
            width: 100px;
            height: 100%;
            background-color: red;
        }

        .content {
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="slider"></div>
        <div class="content"></div>
    </div>
</body>
</html>

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

二、两侧定宽，中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .left, .right {
            width: 100px;
            height: 100%;
            background-color: red;
        }

        .content {
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
    </div>
</body>
</html>

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

三、三等分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .box {
            flex: 1;
            height: 20px;
            background-color: red;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box left"></div>
        <div class="box content"></div>
        <div class="box right"></div>
    </div>
</body>
</html>

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

四、搜索历史不定宽
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flexbox wrap 0 — children overflowing</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        div {
            padding: 10px;
            margin: 10px;
            background: aqua;
        }

        .container {
            display: flex;
            flex-wrap: wrap
        }
    </style>
  </head>
  <body>
    <main class="container">
        <div>First article</div>
        <div>Second article</div>
        <div>Second article</div>
        <div>article</div>
        <div>Second article</div>
        <div>Eighth article</div>
        <div>Second article</div>
        <div>article</div>
        <div>Second article</div>
        <div>Twelfth article</div>
        <div>Second article</div>
        <div>Second article</div>
        <div>Ninth article</div>
        <div>Second article</div>
        <div>article</div>
        <div>Tenth article</div>
        <div>Second article</div>
        <div>Second</div>
        <div>Second article</div>
    </main>
  </body>
</html>

在这里插入图片描述

五、多列布局等宽
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flexbox wrap 0 — children overflowing</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
        }

        div {
            flex: 200px;
            height: 70px;
            margin: 10px;
            background: aqua;
        }

    </style>
  </head>
  <body>
    <main class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </main>
  </body>
</html>

效果如下:
在这里插入图片描述

六、骰子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 200px;
            height: 200px;
            border: 2px solid gray;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            margin: 20px;
        }

        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }

        .item:nth-child(2) {
            align-self: center;
        } 

        .item:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
   </div>
</body>
</html>

在这里插入图片描述

七、上中下布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        header, footer {
            height: 50px;
            background-color: red;
        }

        main {
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <header></header>
        <main></main>
        <footer></footer>
    </div>
</body>
</html>

效果如下:
在这里插入图片描述

八、两列三行撑满父元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body, html{
            width: 100%;
            height: 100%;
        }

        .container {
            width: 800px;
            height: 300px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: space-between;
            background-color: darkgray;
        }

        .container_item {
            width: 200px;
            height: 40px;
            background-color: red;
            /* 根据父元素宽度计算得出 */ 
            margin-right: 400px;
        }

        .container_item:nth-child(2n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="container_item"></div>
        <div class="container_item"></div>
        <div class="container_item"></div>
        <div class="container_item"></div>
        <div class="container_item"></div>
        <div class="container_item"></div>
    </div>
</body>
</html>

如下：
在这里插入图片描述

V。on
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex中的flex-grow、flex-shrink、flex-basis及缩写属性flex的使用场景
m0_51636525的博客
04-25 1万+
1.flex-grow决定了flex items 如何扩展拉伸 可以设置任意非负数字（正小数、正整数、0），默认是0 当flex-container在main axis（主轴）方向上有剩余size（空间）时，flex-grow属性才生效 三个宽度120px（3*120=360）的元素放在一个宽度400px的父级元素中，父级元素使用flex布局 <div class="container"> <div class="item item1">120px</d.
CSS-flex布局详细讲解：
weixin_45718431的博客
03-26 4369
CSS-flex布局详细及其flex布局携程网移动端案列
CSS打造图片翻转立体3D效果
m0_64642443的博客
06-12 2811
css实现图片翻转立体3D效果
flex布局
javachtml的博客
10-30 2333
常用属性介绍： flex属性： 作用：开启flex布局 代码：display: flex; flex-direction属性： 作用：决定项目元素的排列方向 代码：flex-direction: row | column row代表从左到右横向排列，column代表从上到下竖着排列 flex-wrap属性： 作用：如果一条轴线排不下，是否决定项目元素换不换行 代码：flex-wrap: nowrap | wrap justify-content属性： 作用：设置元素在水平方向上的对齐方式 代码：justif
flex布局学习整理
weixin_43026567的博客
11-02 618
一.开启flex布局 在父元素中设置display:flex就可以愉快的使用flex布局了。 二.弹性盒子中常用的属性 属性 描述 flex-direction 元素的排列方式 justify-content 元素在主轴（横轴）方向上的对齐方式 align-items 元素在侧轴（交叉轴）方向上的对齐方式 flex-wrap 元素超出父容器时是否换行 align-c...
Android使用Handler实现View弹性滑动
09-01
在Android中，有多种方法可以实现弹性滑动，例如使用Scroller类、动画API以及通过延迟消息处理机制如Handler。 当我们选择使用Handler来实现弹性滑动时，关键在于控制滑动的速度和间隔。Handler是Android中的一个...
css多种方式实现等高布局的示例代码
09-22
本文将介绍两种纯CSS方法实现等高布局：1) 使用`table-cell`布局，2) 使用`flex`布局。 1. **使用`table-cell`实现等高布局** `table-cell`布局利用了CSS的`display`属性，将元素模拟成表格单元格（`table-cell`...
HTML+CSS常见布局面试题总结
10-31
实际项目中，开发者通常结合多种布局方法，如使用Flexbox处理复杂的一维布局，Grid处理主要的二维布局，同时利用媒体查询实现响应式设计。 以上是HTML+CSS常见布局面试题的主要知识点，熟练掌握这些概念和技术，有...
网站布局练习div模板
04-02
2. **CSS布局技术**：CSS提供了多种布局方法，如流式布局（Flow Layout）、网格布局（Grid Layout）和Flexbox（弹性盒模型）。在单页布局中，Flexbox尤其适用，因为它可以轻松实现内容的水平和垂直对齐，自适应屏幕...
常见的几种页面布局、BFC以及处理过程中遇到的高度塌陷问题
01-20
常见的页面布局方式有多种，每种都有其特定的应用场景和优缺点。 1. 静态布局：这是一种最基础的布局方式，所有元素的尺寸用像素单位（px）定义。当屏幕尺寸变化时，页面会出现滚动条，以适应内容。静态布局的优点...
web真实进度条(上传时间,大小,百分比)
06-22
ASP.NET实现进度条上传文件源码 源码说明 该程序采用了jquery框架，实现了小文件上传。 两个地方需要解释 第一，如何知道监听的这个文件就是上传的这个文件实现机制很简单，就是让asp.net产生一个唯一的guid，这个id序号是唯一的，通过ajax取出来赋值给一个隐藏字段；第二，如何获取guid标志的文件信息？通过asp.net缓存机制实现，上传的过程中，不断的将上传信息往缓存里面写，直到文件上传完成，而在另外一个通过guid获取缓存的信息，信息包括你想要的信息，比如上传了多少字节、消耗了多长时间等。 程序核心页面 index.htm就是文件上传页面，提交form给UploadHandler目录下的Default.aspx，以实现文件上传。 ProgressHandler目录下三个文件为Abort.ashx、GenericGuid.ashx,Handler.ashx功能分别为：根据Guid取消正在上传的文件，生成Guid，根据Guid获取上传信息。 本人改进的地方： 把只允许上传单个文件，改为可以上传多个文件 1.类UploadUtil中的Upload()方法的改进 2.script中ajax-progress-upload.js中的submit事件 3.在index.htm中添加file控件
弹性盒子布局实例详解：从水平布局到垂直布局
weixin_43578304的博客
02-27 1579
在CSS中，弹性盒子布局（Flexbox）提供了一种在容器内高效、灵活地对齐和分布空间的方式。无论是水平布局还是垂直布局，Flexbox都能轻松应对。下面我们将通过几个实例来详细讲解如何在水平和垂直方向上应用Flexbox布局。
如何在PHP中实现文件上传进度条？
周祥平程序专栏
12-17 1109
请注意，这只是一个基本示例，实际应用中可能需要更多的错误处理和安全性措施，以确保文件上传和进度跟踪的可靠性。在PHP中实现文件上传进度条通常需要使用一些前端技术（如JavaScript和AJAX）以及后端技术（如PHP）来实现。在上述示例中，前端使用JavaScript监听上传进度，并在进度发生变化时更新进度条。后端使用PHP来处理文件上传和返回上传进度信息。使用JavaScript来监听文件上传进度，并将进度信息发送到后端以更新进度条。创建一个包含文件上传字段的HTML表单，以便用户选择要上传的文件。
元素实现垂直居中的几种方式
kiritomzzz的博客
07-16 2224
在网页开发中，实现元素的垂直居中是一个常见的需求。接下来就来介绍一下元素实现垂直居中的几种方式。
熟练使用flex布局
朱登凯的专栏
08-20 5305
flex是一种功能非常丰富的布局模式，是为了弥补已有的布局手段的短板。作为一种功能丰富的布局模式，它一口气解决以下全部问题： 如何支持横向布局和纵向布局 百分比模式的动态宽度和动态高度如何实现 元素的排列方向和动态间距如何实现 自动换行 下面我们来逐个实现上面的所有场景。 基础用法 <div class="container"> <div class="item"></div> <div class="item"></
CSS3【display: flex；】与【flex: 占用比例；】的使用
卡尔特斯
01-18 5076
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad
flex均匀垂直分布
热门推荐
qq_36939013的博客
04-29 1万+
html <div class="box"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> ...
el-upload实现上传文件并展示进度条
weixin_44813858的博客
03-22 7000
el-upload上传文件实现进度条
前后端实现文件上传进度条-实时进度
qq_45338391的博客
06-04 480
【代码】前后端实现文件上传进度条-实时进度。
使用flex实现哔站布局
最新发布
06-20
Flexbox 是一种现代 CSS 布局模型，用于创建灵活、响应式的用户界面设计，特别适合处理一维（行或列）布局问题，如导航栏、卡片堆栈等。要在 B站（Bilibili）或其他网站上实现布局，你可以使用 Flexbox 的主要属性和概念： 1. **启用 Flexbox**：首先，给容器设置 `display: flex;` 属性，使其成为一个 Flex 容器。 ```css .container { display: flex; } ``` 2. **主轴和侧轴**：默认情况下，Flexbox 会沿主轴（row 或 column）对元素进行排列。可以通过 `flex-direction` 属性改变方向： - `flex-direction: row;`（默认）：水平布局 - `flex-direction: column;`：垂直布局 3. **对齐方式**：使用 `align-items`, `justify-content` 来控制元素在主轴和侧轴上的对齐方式： - `align-items: flex-start` 或 `flex-end` 对齐项目顶部或底部 - `align-items: center` 或 `stretch` 中心对齐或拉伸 - `justify-content: flex-start`, `flex-end`, `center`, `space-between`, `space-around` 控制项目之间的间距 4. **弹性项目**：每个使用 Flexbox 的子元素称为“弹性项目”（flex item）。它们可以调整自己的大小以适应容器，使用 `flex` 属性： - `flex: 1` 表示自动分配空间 - `flex: 0 1 auto` 或 `flex-basis: auto` 设置初始大小 5. **顺序和换行**：`flex-wrap` 属性控制换行，`order` 属性用于定义项目的顺序： - `flex-wrap: nowrap`（默认）不换行 - `flex-wrap: wrap` 换行 - `order` 可以调整元素的显示顺序 使用这些属性，你可以创建出 B站页面中常见的瀑布流布局、卡片式布局、网格布局等多种效果。记得结合 CSS 另一个布局工具 Grid 或媒体查询来提供更好的响应性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值