flex+margin打开你的新大陆

最新推荐文章于 2024-10-17 17:37:06 发布
最新推荐文章于 2024-10-17 17:37:06 发布
阅读量188 收藏
点赞数 1
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50885646/article/details/134567726
版权

大家在最初学习CSS的时候想必对flex,margin已经很熟悉了，但是flex+margin能给你意想不到的结果,它能大大简化我们的布局。

举个例子：

如果我们要想实现一个元素水平垂直居中，以前是这样做的给父元素设置display:flex,justify-content:center,aligin-content:center。使用margin+flex.你只需要在子元素里面设置margin:auto。

在弹性盒子里面设置margin:aoto的意思是吃掉元素剩余的空间。假设设置margin-left:aoto就是吃掉它左边的剩余空间，同理其它边也是一样。

这里就是各吃掉一半，所以就水平居中了。

这种复杂的布局

初级前端CV工程师
关注
手写仿淘宝商城页面（html+css+部分js）
xiediyue的博客
10-07 4929
一个练手项目，边看视频边写的，代码都是别人的。 效果图： 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, ini.
【学习笔记】HTML+CSS模仿静态淘宝首页
热门推荐
ImDaret的博客
10-08 2万+
一、先上一张成果图 二、已上传Github https://github.com/ImDaret/Front-end-learning 三、直接上代码（头大预警） HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
前端 CSS 经典：flex + margin 布局
weixin_64684095的博客
06-21 492
如今我们布局大多时候都是用的 flex 布局，但是有时我们也可以使用 margin 小技巧去完成布局。在弹性盒中当我们把 margin 某一个方向上设置为 auto，他的含义是用 margin 吃掉这个方向的剩余空间。
CSS 属性篇(四)：Flex弹性盒子
weixin_33762321的博客
02-22 215
一、Flex介绍 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局: .box{ display: flex; } 复制代码行内元素也可以使用 Flex 布局: .box{ display: inline-flex; } 复制代码Webkit 内核的浏览器，必须加上-webkit前缀: .box{ ...
flex+margin布局方法
Clover ‘s Blog
06-03 294
方式：【具体代码1】
前端开发攻略---利用Flexbox和Margin实现智能布局：如何巧妙分配剩余空间，让你的网页设计更上一层楼？
nibabaoo的博客
04-09 545
利用Flexbox和Margin实现智能布局：如何巧妙分配剩余空间，让你的网页设计更上一层楼？
flex + margin 妙用
一只路过的小码农
12-27 1301
利用flex + margin 巧用
ColorUI组件库简易教程之扩展插件
仗剑东游的猫
11-22 9588
按照惯例，在此奉上官方示例！！！ 目录 扩展插件 索引列表 微动画 全屏抽屉 垂直导航 扩展插件 索引列表 索引列表主要由scroll-view标签实现，类名为indexes，具体js逻辑请看源码，有些我没看懂，希望看懂的大佬教教我 <template> <view> <view class="cu-bar bg-white...
微信小程序电影详情功能实现
weixin_43904465的博客
06-09 1万+
小程序中详情页面 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将...
前端基础总结--CSS
chenyouleww的博客
07-08 604
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
flex与margin在单行布局的配合使用
weixin_30650859的博客
08-16 426
flex布局极大程度上方便了页面的构建，如下的几种布局当中，为了不增加额外的标签来嵌套，单独使用flex布局的话，还需要其他一些设置来处理，比如与伪元素的配合使用，这个下次再进行描述，这里flex与margin的使用配合，个人认为是目前自己用过最方便的一种方法。 <!DOCTYPE html> <html> <head> <meta c...
flex配合margin实现元素均匀分布
最新发布
Rverdoser的博客
10-17 271
在Flex布局中，要使用margin实现元素均匀分布，可以设置容器内元素的margin值相同，并且设置容器的justify-content属性为space-between。这样，第一个元素会紧贴容器边缘，最后一个元素会被紧贴容器边缘，其余元素均匀分布在这两个元素之间。在这个例子中，.container是一个Flex容器，.item是容器内的子元素。子元素.item使用了水平方向的margin，容器.container使用了justify-content: space-between;
flex布局 （解决了margin传递、重叠（叠加）问题）
qq_37672347的博客
08-23 1万+
Flex布局（伸缩布局盒模型）是CSS3提出的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。 任何一个容器都可以指定为Flex布局。 .box { display: flex; } 行内元素也可以使用Flex布局。 .box { display: inline-flex; } 最新版本，使用display:flex或者display:inline-flex ...
Flex布局+margin 如何实现列表布局
qq_63605379的博客
10-28 217
实现列表布局
flex布局，子级margin会撑爆父级div
qq_27806371的博客
09-08 796
flex布局 子级撑爆父级
神奇的flex+margin:auto
Brilliant Me 的博客
08-19 3423
flex布局相信是大家现在开发中比较常使用的一种布局了，使用flex布局进行垂直水平居中相信大家都已经很熟悉了。相信下边的代码大家已经屡见不鲜了。 div { width: 100px; height: 100px; background-color: black; display: flex; align-items: center; ...
探秘 flex 上下文中神奇的自动 margin
weixin_34253126的博客
05-23 330
为了引出本文的主题，先看看这个问题，最快水平垂直居中一个元素的方法是什么？ 水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了： <div class="g-container"> <div class="g-box"></div> </div> 复制代码.g-conta...
flex弹性布局
m0_72741512的博客
08-01 353
flex，弹性布局
css: flex 与 margin
好好学习，天天向上 ～
09-14 230
<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> <sty.
Flex+Spring+BlazeDS+Cairngorm 框架集成教程
"Flex+Spring+BlazeDS+Cairngorm 框架整合与环境构建教程" 在本文中，我们将深入探讨如何整合Flex、Spring、BlazeDS和Cairngorm这四个技术来构建一个强大的富互联网应用程序（RIA）。这个组合提供了前端Flex的用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值