旧版弹性盒

一、旧版弹性盒模型

  1、display:box

    说明:(必须加前缀)设置弹性盒使用如下属性,必须在父代设置display:box;

  2、box-orient

    说明:在父级上设置该属性,则子代按水平排列或竖直排列

    注:所有主流浏览器不支持该属性,必须加上前缀

    1)horizontal 水平排列,子代总width=父级width;若父级固定宽度,则子代设置的width无效,子代会撑满父级宽度

    2)vertical 垂直排列,子代总height=父级height;若父级固定高度,则子代设置的height无效,子代会撑满父级高度。

  3、 box-pack

    说明:在父级设置,子代的水平对齐方式;(父容器里面主轴对齐方式)

    1)start 水平左对齐

    2)end 水平右对齐

    3)center 水平居中对齐

  4、 box-align

    说明:在父级设置,子代的垂直对齐方式;(父容器里面子容器侧轴对齐方式)

    1)start 垂直顶部对齐

    2)end 垂直底部对齐

    3)center 垂直居中对齐

    4)stretch 拉伸子代的高度,与父级设置的高度一致;子代height无效。

  5、 box-direction

    说明:在父级上设置该属性,确认子代的排列顺序;

    1)normal 默认值,子代按html顺序排列

    2)reverse 反序

  6、 box-flex

    说明:

    1)占父级元素宽度的number份

    2)若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 number占份数

    3)若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总margin值)宽度占number份

原文地址:https://www.cnblogs.com/liufuyuan/p/10256165.html

时间: 01-11

旧版弹性盒的相关文章

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

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

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> &

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

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

CSS旧版flex及兼容

× 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本.如果要保证flex弹性盒模型在各个主流浏览器上表现一致,就必须掌握这3个版本的不同用法.深入理解CSS弹性盒模型flex已经详细介绍过其基本用法,本文主要介绍旧版本flex的不同之处及兼容写法 适用范围 旧版本flex是指最早的flex版本,该版本的flex应用在safari3.1-6(主要表现在

弹性盒模型flex

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

弹性盒布局display:flex详解

一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果.本文介绍的就是一种实现这种变化的比较简单的模型:弹性盒子. 二:属性 首先要给父容器设置display:flex(或者inline-flex)属性,就可以让该父容器的布局方式变为弹性盒模型,接着,给父容器或者子元素设置不同属性来实现具体布局. ①:给父容器添加的属性 1.fle

HIVE自定义TextInputFormat (旧版MapReduceAPI ok, 新版MapReduceAPI实现有BUG?)

我们的输入文件 hello0, 内容如下: xiaowang 28 [email protected][email protected] 38 [email protected][email protected] 100 unknown 逻辑上有3条记录, 它们以@[email protected]分隔. 我们将分别用旧版MapReduce API 和新版MapReduce API实现自定义TextInputFormat,然后在hive配置使用, 加载数据. 首先用旧版API 1, 自定义For

创建本地RPM源之更新系统旧版软件

事情起因: 系统版本为Centos6.6 ,因为之前同事没有采用最小化选择性安装,所以系统安装好后自带有mysql5.1的三个安装包: [[email protected] ~]# rpm -qa | grep mysql mysql-5.1.73-3.el6_6.x86_64 mysql-devel-5.1.73-3.el6_6.x86_64 mysql-lib-5.1.73-3.el6_6.x86_64 在安装新版本mysql前,只卸载掉了 mysql 和 mysql-devel,但没能成功

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 弹性盒布局模型

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