-webkit-box 与 -webkit-flex 的差异

最新推荐文章于 2023-01-11 15:39:24 发布
最新推荐文章于 2023-01-11 15:39:24 发布
阅读量1.8w 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ISaiSai/article/details/50110097
版权

-webkit-box  应该是 -webkit-flex 的旧写法

使用-webkit-box 的时候   -webkit-flex-wrap 属性不生效，必须使用-webkit-flex

正确的css覆盖 顺序是

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .container {

            display: flex;

            display: -webkit-flex;

            background-color: gray;

            -webkit-box-pack: justify;

            width: 100%;

            -webkit-flex-wrap: wrap-reverse;

            -webkit-box-orient: horizontal;

            height: 200px;


        }


        .blue {

            border: 1px solid red;

            min-width: 100px;

            -webkit-box-flex: 1;

            margin: 10px;

            background-color: blue;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

    <div class="blue"></div>

</div>

</body>

</html>

ISaiSai
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实例讲解CSS3中的box-flex弹性盒属性布局
12-30
box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-...
CSS3起步 11-------弹性盒模型【新版flex以及老版-webkit-box】及骰子布局demo
h1234561234561的博客
04-15 1400
一，flex基本概念 问题一，什么是flex Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。且任何元素都可以成为flex容器，使其内部为flex布局。 块级元素：display: flex; 行内元素：display: inline-flex; 注意点： 01，Webkit 内核的浏览器，必须加上-webkit前缀。 02，设为 Flex 布局以...
webassembly类型_WebAssembly初探
weixin_42394257的博客
12-13 1617
1. 介绍WebAssembly是一个可移植、体积小、加载快并且兼容 Web 的全新格式浏览器内：WebAssembly是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范WASM 1.0(MVP版本)目前已经被Chrome、Safari、FireFox、Edge所支持浏览器外：由Mozilla、fastly、inter、Red hat组成的字节码联盟，该联盟旨在通过协作实施标准和提出新...
深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解
ScottePerk的博客
10-06 1万+
这篇文章对flex不熟也可以看。这篇文章只讲这三个属性。为了简单化，不会提到主轴交叉轴，也不讲方向，默认方向就是水平方向从左往右。但并不影响对这三个概念的理解。如果你觉得对flex比较了解，可以直接从第二小节开始看起。
WebFlux下载文件控制层示例
qq_43762562的博客
01-11 268
WebFlux下载文件
10-CSS布局之flex布局
qq_43975332的博客
08-19 761
1 flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 2 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。 每根轴都有起点和终点，这对于元素的对齐非常重要。 弹性容器中的所有子元素称为<弹性元素&gt
-webkit-box —— flex布局的前世（流体布局）
cc_King的博客
03-07 757
-webkit-box 布局整理、flex布局整理
float:left,display:-webkit-box,display:flex的区别
wll_web的博客
12-15 1611
float:left,display:-webkit-box,display:flex的区别 float:left,display:-webkit-box,display:flex都可以实现元素横向排列，但是却存在的一定的区别： HTML代码： <div id="box"> <div class="inner">1</div> <div class...
跟面试官扯了半小时的CSS的flex弹性布局，都在这里了。【看完你会更加透彻】
huangfuyk.的博客
03-22 1万+
目录1. CSS3怪异盒模型2. flex基本概念3. 弹性布局属性4. CSS3多列5. 响应式 1. CSS3怪异盒模型 在说flex布局之前，再来回顾一下CSS3的怪异盒模型。 （1） 标准盒模型的总大小=width/height+padding+border+margin; 怪异盒模型的总大小=width/height+margin. （2）box-sizing属性： 可以给box-si...
webkit
liu940129953的博客
03-14 197
1. display: -webkit-box; 使用flexbox 布局 -webkit-box-pack: center; 实现容器内容垂直居中 -webkit-box-align: center; 实现容器内的内容水平居中 -webkit-box-orient: vertical; 容器内的元素垂直排列 2.-webkit-box 与 -webkit-flex ...
-webkit-flex 属性
热门推荐
xiaoerduo123x的博客
02-03 1万+
-webkit-flex 属性 一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器，其包含的子元素是伸缩项目。 flex是一个复合属性。Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义。 由多个伸缩项目组成其具体的布局方式。 是为了呈现复杂的应用与页面而设计出来的。 语法 display:-webkit-flex; [指定伸缩容器
uni-app flex布局
01-20
display:-webkit-flex; display:flex; } 特点： flexible box：弹性盒状布局 容器控制内部元素的布局定位 CSS3引入的新布局模型 伸缩元素，自由填充，自适应 优势： 可在不同方向排列元素 控制元素排序的方向 ...
contao-autoprefixer-bundle:Contao 4 autoprefixer插件
05-26
Contao 4的Autoprefixer插件 关于 ... display : -webkit-box; display : flex } : -moz-full-screen a { display : flex } : -ms-fullscreen a { display : -ms-flexbox; display : flex } : fu
flex-layout-demo:Flex布局教程，包含示例代码
05-13
flex-layout-demo参考:[1] [2] [3] [4]Flex布局简介Flex英文为flexiable box，翻译为弹性盒子，Flex布局即弹性布局。Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为：.box{...
SASS-Flexbox
05-16
例如，如果您想写： display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */display: -ms-flexbox; /* TWEENER - IE 10 */display: -webkit...
JavaScript介绍.zip
最新发布
04-23
javascript,JavaScript 最初由 Netscape 公司的 Brendan Eich 在 1995 年开发，用于 Netscape Navigator 浏览器。随着时间的推移，JavaScript 成为了网页开发中不可或缺的一部分，并且其应用范围已经远远超出了浏览器，成为了全栈开发的重要工具。
上位机开发罗克韦尔abcip通信协议详解
04-23
上位机开发罗克韦尔abcip通信协议详解 1.注册会话命令详解 6500 0400 00000000 00000000 0000000000000000 00000000 0100 0000 响应 6500 0400 05000400 00000000 0000000000000000 00000000 0100 0000 6500：注册请求命令 0400：服务长度（0100 0000） 00000000：会话句柄 （由PLC生成） 00000000：状态默认 0000000000000000：发送方描述，默认0 00000000：选项，默认0 0100：协议版本，默认1 0000：选项标记，默认0
Microsoft SPY++ 工具及使用教程
04-23
Spy++ (SPYXX.EXE) 是一个基于 Win32 的实用工具，提供系统进程、线程、窗口和窗口消息的图形视图。 Spy++ 有两个版本。 第一个版本，名为 Spy++ (spyxx.exe)，用于显示发送到在 32 位进程中运行的窗口的消息。 例如，在 32 位进程中运行的 Visual Studio。 因此，可以使用 Spy++ 来显示发送到“解决方案资源管理器” 中的消息。 由于 Visual Studio 中大多数生成的默认配置都是在 32 位进程中运行的，因此如果已安装所需组件，则第一个版本的 Spy++ 就是在 Visual Studio 中的“工具”菜单上可用的那一个。 第二个版本，名为 Spy++（64 位）(spyxx_amd64.exe)，用于显示发送到在 64 位进程中运行的窗口的消息。 例如，在 64 位操作系统上，记事本在 64 位进程中运行。 因此，可以使用 Spy++（64 位）来显示发送到记事本的消息。 详细的使用说明请见：https://blog.csdn.net/huang1600301017/article/details/138137
js导出excel封装【原生、配置式】 示例
04-23
导出excel示例
flex和 -webkit-box的区别
04-27
Flex和-webkit-box都是CSS布局模块中的一种弹性盒模型布局，它们可以用来实现弹性布局，但是它们的实现方式和用法有一些区别。 Flex是CSS3中新增的一种布局模式，它可以用来在一个容器中对子元素进行灵活的排列。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值