关于display:flex和display:-webkit-box的用法

一、对内部元素平均分配的问题

1、display:flex; 如果要加私有的话那么方法是display:-webkit-flex;而不是-webkit-display:flex;子元素flex:1然后平均分配，但是这个方法会有一个兼容性，就是UC和QQ浏览器有兼容

2、display:-webkit-box,display:box;  子元素要：-webkit-box-flex:1;-moz-box-flex:1; 如果要平均分配要加上width:0;这个兼容性相对来说好一些

先简单的总结下，具体请大家看张鑫旭的博客，更详细

时间： 2024-10-02 21:44:39

关于display:flex和display:-webkit-box的用法的相关文章

display:flex和display:box布局浏览器兼容性分析

display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实际的测试中display:flex不能完全的替代display:box.display:flex的浏览器兼容性比较麻烦. 1.关于display:flex 对于响应式布局,使用flex很方便,但是它的兼容性也是一个值得考虑的问题. <div class="container">

CSS3 display:flex和display:box有什么区别？

**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)- W3C 2011年第2次草案:[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)- W3C 2012年第5次草案及以后的候选推荐标准:[display:flex |

display:flex 布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. [css] view plain copy .box1{ display: flex; } .box2{ display: inline-flex;  <sp

1.display:flex布局笔记

/*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的float,clear,vertical-align属性都失效 1 .box1 { 2 display : flex 3 } 4 .box2 { 5 display : inline-flex 6 } 7 .box3 { 8 display : -webkit-flex; 9 display : flex

CSS display:flex的示例

在编写下图类似的HTML时,我最初使用的float,发现浮动的写法很不方便,后面经百度改用display:flex进行布局,并对这一CSS属性产生了浓厚的兴趣. 通过几行代码轻松解决了左右对齐显示,并且意外发现通过 align-items: center 还可以实现上下对齐居中 我正在使用 styled-components 去实现前端效果,所以代码分为样式部分style.js和页面部分index.js style.js: 1 export const Legend = styled.div`

css display:flex 属性

一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后,子元素的float.clear和vertical-align属性将失效. 二:flex的六个属性 flex-direction 容器内元素的排列方

css display:flex布局介绍

定义容器的display属性 .box{ display: -webkit-flex; /*webkit*/ display: flex; } /*行内flex*/ .box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; } 容器样式 .box{ flex-direction: row | row-reverse | column | column-reverse; /*主轴方向:左到右(默认) | 右到左 | 上到

HTML/CSS：display:flex 布局教程

网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写

display:flex弹性布局

一般的布局是基于盒模型,使用display属性 + float属性 + position属性.flex是h5中新增的页面布局方案. 一:flex布局是什么. flex是Flexible Box,就是"弹性布局".它具有非常好的灵活性. 任何容器都可以开启弹性布局. .box{ display:flex}; 行内元素开启弹性布局 .box{ dispaly: inline-flex}; webkit内核的浏览器,需要加前缀-webkit- .box{ display: -webkit-f