first

<style>

.box{width:1024px;height:100px; border:5px solid black; padding:10px; display:-webkit-box; display:-o-box;display:-moz-box; -webkit-box-orient:vertical; -o-box-orient:vertical; -moz-box-orient:vertical;}/*设置垂直显示，默认横向显示*/

.box div{

	width:100px;

	height:100px;

	background:pink;

	border:2px solid #fff;

	}

</style>

</head>

<body>

<div class="box">

	<div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

</body>

效果如图：

second

<style>

.box{width:1024px;height:100px; border:5px solid black; padding:10px; display:-webkit-box; display:-o-box;display:-moz-box;

-webkit-box-direction:Reverse;}/*横向显示，div顺序颠倒*/

.box div{

	width:100px;

	height:100px;

	background:pink;

	border:2px solid #fff;

	}

</style>

</head>

<body>

<div class="box">

	<div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

</body>

效果图：

third

<style>

.box{width:1024px;height:100px; border:5px solid black; padding:10px; display:-webkit-box; display:-o-box;display:-moz-box;

}

.box div{

	width:100px;

	height:100px;

	background:pink;

	border:2px solid #fff;

	}

.box div:nth-of-type(1){-webkit-box-ordinal-group:3;}

.box div:nth-of-type(2){-webkit-box-ordinal-group:1;}

.box div:nth-of-type(3){-webkit-box-ordinal-group:5;}

.box div:nth-of-type(4){-webkit-box-ordinal-group:2;}

.box div:nth-of-type(5){-webkit-box-ordinal-group:4;}

/*设置全部元素在父级下的排列顺序*/

</style>

</head>

<body>

<div class="box">

	<div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

</body>

效果图：

fourth-弹性空间

<style>

.box{width:1024px;height:100px; border:5px solid black; padding:10px; display:-webkit-box; display:-o-box;display:-moz-box;

}

.box div{

	width:100px;

	height:100px;

	background:pink;

	border:2px solid #fff;

	}

.box div:nth-of-type(1){width:200px;}

.box div:nth-of-type(2){-webkit-box-flex:1;}

.box div:nth-of-type(3){-webkit-box-flex:2;}

.box div:nth-of-type(4){-webkit-box-flex:3;}

.box div:nth-of-type(5){-webkit-box-flex:4;}

/*设置全部元素在父级下的排列顺序*/

</style>

</head>

<body>

<div class="box">

	<div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

</body>

效果图：

fifth

<style>

.box{width:1024px;height:100px; border:5px solid black; padding:10px; display:-webkit-box; display:-o-box;display:-moz-box;-webkit-box-pack:justify;}

/*所有子元素在左侧显示，空余空间在右侧：-webkit-box-pack:start;

所有子元素居中显示：-webkit-box-pack:center;

所有子元素在右侧显示，空余空间在左侧：-webkit-box-pack:end;

空余空间在子元素之间平均分布：-webkit-box-pack:justify;

*/

.box div{

	width:100px;

	height:100px;

	background:pink;

	border:2px solid #fff;

	}

</style>

</head>

<body>

<div class="box">

	<div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

</body>

效果图：

sixth-在垂直方向上对元素位置进行管理

start

end

center

一个位置宽高的元素水平垂直居中显示在页面中：

<style>

html{height:100%;}

body{height:100%;}

.box{height:100%; padding:10px; display:-webkit-box; display:-o-box;display:-moz-box;-webkit-box-pack:center;-webkit-box-align:center;}

.box div{

	width:100px;

	height:100px;

	background:pink;

	border:2px solid #fff;

	}

</style>

</head>

效果图：

css3-弹性盒模型的更多相关文章

  1. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  2. css3基础教程：CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  3. CSS3弹性盒模型，Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  4. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  5. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  6. css和css3弹性盒模型实现元素宽度（高度）自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  8. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

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

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

  10. CSS3弹性盒模型之box-orient & box-direction

    Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...

随机推荐

  1. firefox event.preventDefault(); 没有效果的解决方案

    $('.sub-list-click a').click(function (event) { event.preventDefault(); var sub = $(this).parent(&qu ...

  2. docker swarm英文文档学习-9-使用Docker Configs存储配置数据

    Store configuration data using Docker Configs 使用Docker Configs存储配置数据 Docker 17.06引入了集群服务配置,允许你在服务镜像或 ...

  3. ECS API

    一.API调用方式 ➢对ECS API接口调用是通过向ECS API的服务端地址发送HTTP GET请求,并按照接口说明在请求 中加入相应请求参数来完成的;根据请求的处理情况,系统会返回处理结果. ➢ ...

  4. oracle 查询 归档日志最大值和平均值

    select max(ss.size_GB), avg(ss.size_GB)  from (select s.*, rownum rn2          from (select a.*      ...

  5. centos7安装python3和pip3

    python3安装 1.安装准备 # 创建安装目录 mkdir /usr/local/python3 #下载python3 wget --no-check-certificate https://ww ...

  6. Java Web 项目目录结构

    为了使 Web 容器顺利地执行 Web 应用,开发者需要以一种标准的方式将 Web 项目中的资源(Servlets.JSP 等)打包.一个 Web 项目的目录结构可分为两种: 发布目录结构 Web 容 ...

  7. IDEA中使用vim删除复制代码的行号

    从别的地方复制来的源代码有时候会把前面的行号也一起拷过来,如果只是十几行代码的话手工去除还是方便的,但是如果代码有很多行的话,一行一行地删就不明智了. 例如我要复制以下代码 1 public clas ...

  8. Luogu P2700 逐个击破

    qwq 同关押罪犯 对于这种希望几个对象分开的题目,只要把并查集反过来想就可以了. 既然要求删除的边权最小,那么只要反过来求给定的点不连通时保留的边权最大即为正解. 同样的,首先将边权排序,不会使敌人 ...

  9. D. Imbalanced Array

    让你计算所有连续子序列的最大值-最小值的和. (单调栈) 对于一个数Ai来讲,如果其有贡献的价值,要么是-Ai作为最小值,要么是Ai作为最大值. 那么Ans=ΣAi*maxn-Ai*minn. voi ...

  10. timeout可以实现当一个命令在规定时间内不返回就强制返回的功能 + 杀毒安装ClamAV nmap 速度 比Telnet 快

    [root@xiaowei ~]# cat telnetport.sh #!/bin/bash Port=25223 timeout 2 ssh root@127.0.0.1 "telnet ...