css3 利用dispaly:flex
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t-r{
display:flex;
flex-direction: row;
width: 200px;
justify-content:center;
border: 1px solid red; }
.t-r div{
border:1px solid blue;
height: 60px;
} .t-c{
display: flex;
flex-direction: column;
width:200px;
align-items:center;
border: 1px solid red;
}
.t-c div{
border:1px solid blue;
width: 100px;
}
</style>
</head>
<body>
<div class="t-r">
<div>123</div>
<div>456</div>
<div>789</div>
</div>
<div class="t-c">
<div>123</div>
<div>456</div>
<div>789</div>
</div>
</body>
</html>
效果如图：
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
主要列出我自己常用的特性，更多布局请参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
css3 利用dispaly:flex的更多相关文章
- CSS3 flexbox 布局 ---- flex 容器属性介绍
flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...
- 三栏布局之 css3 calc和 flex
圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...
- CSS3利用box-shadow实现相框效果
CSS3利用box-shadow实现相框效果 <style> html { overflow: hidden; background-color: #653845; background- ...
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- 响应式布局（CSS3弹性盒flex布局模型）
传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...
- CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
- css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明
css参考文档 http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...
- css3布局属性flex
html代码如下: <ul class="ul_box"> <li><a href="#">html</a>&l ...
随机推荐
- [Java] 高效快速导入EXCEL数据
需求1.高效率的以excel表格的方式导入多条数据.2.以身份证号为唯一标识,如果身份证号已存在,则该条数据不导入. 分析刚开始的时候是传统的做法,解析excel数据,获取单个对象,判断身份证是否已存 ...
- Maven新建一个Spring MVC项目
新建一个Maven项目,选择archetypes为maven-archetype-webapp,相关的名称按个人习惯取,我这里取Group Id:moonlit-groupArtifact Id:mo ...
- 通过Servlet获取初始化参数
获取初始化参数在web.xml中配置Servlet时,可以配置一些初始化参数.而在Servlet中可以通过ServletConfig接口提供的方法来获取这些参数.(其实还可以通过ServletCont ...
- windows mysql初始化
参考文章 https://dev.mysql.com/doc/refman/5.7/en/windows-install-archive.html mysqld --initialize --user ...
- 用一个二维码做下载地址，自动区分是 ios 还是 android
用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone 和 ipad. <html> <head> <meta http-equiv ...
- 第一次广搜！HDU1548--A Strange Lift
一上来看见题目就用了深搜(因为只会深搜)果断内存超限(据说时间也会超限)无奈只好开始用广搜 其实广搜的思路和深搜有很多类似的地方 不过实现的过程中用到了队列 因此有点难以理解(好吧我个人认为) 这题是 ...
- centos7 docker install
env: os :centos 7 vmware steps: 1.yum -y install docker after installed ,using docker version cmd ...
- shell命令发送网站请求
GET请求:curl "http://192.168.87.195:8888/refresh" POST请求:curl -d "name=value" &quo ...
- POJ 2374 Fence Obstacle Course(线段树+动态规划)
Fence Obstacle Course Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 2524 Accepted: ...
- POJ 3735 Training little cats（矩阵快速幂）
Training little cats Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11787 Accepted: 2892 ...