CSS3弹性盒模型

旧式的弹性盒子

1、在拥有盒子的盒子上加display:box; 或 inline-box 开启弹性盒模型

2、box-flex 分配空间,假如容器有a份,box-flex:2,那就占a分之2

3、分布方向  水平box-orient: horizontal;  垂直 box-orient:vertical;

4、定义显示顺序:box-ordinal-group

实例

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>旧弹性盒模型</title>
    <style type="text/css">
     .content{
         width: 1000px;
         display:-webkit-box;
     }
    .content div {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    #box1 {
        background: #F69A0B;
         -webkit-box-flex:1;
         -webkit-box-ordinal-group:2;
    }

    #box2 {
        background: #FE6403;
       -webkit-box-flex:2;
       -webkit-box-ordinal-group:1;
    }

    #box3 {
        background: #02C3F5;
        -webkit-box-flex:3;
        -webkit-box-ordinal-group:3;
    }
    </style>
</head>

<body>
    <div class="content">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
        <div id="box3">box3</div>
    </div>
</body>

</html>

注意

display:box; 是在属性值加兼容如 display:-webkit-box;

时间: 09-06

CSS3弹性盒模型的相关文章

CSS3弹性盒模型flexbox完整版教程

文章目录 基础知识 属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 请注意: flex-direction (适用于父类容器的元素上) flex-wrap (适用于父类容器上) flex-flow (适用于父类容器上) justify-content (适用于父类容器上) align-items (适用于父类容器上) align-content (适用于父类容器上) order (适用于弹性盒模型容器子元素) flex-grow (适用于弹性盒模型容

CSS3弹性盒模型,Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

CSS3弹性盒模型之box-orient &amp; box-direction

Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origent: 水平或垂直分布. box-origent有两个值:horizional(水平)和vertical(垂直),意思就是元素的排列方式! css代码如下: body {display: -webkit-box; -webkit-box-orient: horizional; } 水平排列方式如下:

CSS3弹性盒模型之Flexbox是布局模块box-sizing &amp; box-orient &amp; box-direction &amp; box-ordinal-group

css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入width之内 padding-box,border-box,border和padding计算入width之内 ie8+浏览器支持content-box和border-box: ff则支持全部三个值. 使用时: -webkit-box-sizing: 100px; //

CSS3弹性盒模型之box-flex

对于之前讲过的box-sizing属性,对于页面布局很有用,但是突然发现它依然存在一些问题,前面例子中不会存在问题,不代表它没有问题.如果元素的个数整除100%的时候呢,比较3个元素,那么第一个盒子的宽度就会是33.3333333%,很显然,无论如何都是除不尽的,也就是说不可能平均分配.这显然是不完美的!是否有更完美的解决方案呢,答案是——有,它就是 box-flex. box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.它使

深入理解 CSS3 弹性盒布局模型

Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最重要的一环就是布局.需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果.这也使得布局的逻辑变得更加复杂.本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求.它的优势在于开发人员只是声明布局应该

弹性盒模型flex

弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项.而因为最近在研究小程序,发现中间使用弹性盒子布局效果更好效率更高一点,所以就将之前学习弹性盒模型的相关知识点整理出来,给大家分享. 弹性盒模型flex布局介绍 弹性盒模型(flexbox)又称为弹性布局,是css3中新提出的一种布局方式,通过弹性布局,可以让子元素自动调整宽度和高度,从而达到很好的填充任何

详细介绍弹性盒模型(display:flex)

弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box:这里,我们暂时不考虑旧的,我们只看新的. 为容器指定弹性盒子,只需在父元素(也就是容器)中设置:display:flex:(注意,webkit内核的需要加webkit前缀,行内元素设置弹性盒子的话,设置display:inline-flex:而且,设置了弹性盒子,子元素的float,clear,vertical属性都将失效). 弹性盒子默认有两条轴,横轴和纵轴,默认横轴为主轴(默认自左向右)纵轴为辅

css3弹性盒子模型之box-flex

css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex 属 box-flex是css3新添加的盒子模型属性),它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)