flexbox简介_html/css_WEB-ITnose

一、概述

浮动在移动布局中不再重要，flex盒模型越来越重要。

flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。最新的语法和现在规范是同步的（例display:flex和“flex-{*}”属性）。在这之间的语法是2011年出现的非官方语法，只能被IE识别（例display:flexbox;display: -ms-flexbox）。最老的语法产生于2009年（例display: box;或者“box-{*}”属性） 

flexbox是css3新增盒子模型，可以实现复杂的布局。flexbox没有得到firefox,Opera,chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)，opera(-o),chrome/safari(-webkit)。

flexbox经典的布局应用是垂直等高，水平均分，按比例划分。

二、flexbox常用属性

1、用于父元素的样式

display:block;该属性会将此元素及其直系子代加入弹性框模型中。（flexbox模型只适用于直系子代） box-orient :horizontal|vertical|inline-axis|block-axis|inherit;该属性定义父元素中的子元素是如何 排列 的。horizontal对父元素的宽度分配划分。 box-pack :start|end|center|justify;box-pack表示父容器里面子容器的 水平 对齐方式

box-align:start|end|center|baseline|stretch;表示父容器里面子容器的 垂直 对齐方式。

2、用于子元素的样式

box-flex:0|任意数字；该属性让子容器针对父容器的宽度按一定规则进行划分。 三、快速入门demo

1、子元素水平排列，按比例分割父元素宽度

.parent宽度500px，其子元素水平排列，child-one占1/6，child-two占2/6，child-three占了3/6。

         .parent{            width: 500px;            height: 200px;            display: -webkit-box;            -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */        }        .child-one{            background: lightblue;            -webkit-box-flex: 1;        }        .child-two{            background: lightgray;            -webkit-box-flex: 2;        }        .child-three{            background: lightgreen;            -webkit-box-flex: 3;        }      
     
        
1

      
查看更多关于flexbox简介_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109705