直接上代码：

<!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的更多相关文章

  1. CSS3 flexbox 布局 ---- flex 容器属性介绍

    flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...

  2. 三栏布局之 css3 calc和 flex

    圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...

  3. CSS3利用box-shadow实现相框效果

    CSS3利用box-shadow实现相框效果 <style> html { overflow: hidden; background-color: #653845; background- ...

  4. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  5. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  6. 响应式布局（CSS3弹性盒flex布局模型）

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

  7. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  8. 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/ ...

  9. css3布局属性flex

    html代码如下: <ul class="ul_box"> <li><a href="#">html</a>&l ...

随机推荐

  1. Mongodb的性能优化问题

    摘要 数据库性能对软件整体性能有着至关重要的影响,对于Mongodb数据库常用的性能优化方法主要有: 范式化与反范式化: 填充因子的使用: 索引的使用: 一. 范式化与反范式化 范式是为了消除重复数据 ...

  2. mysql存储过程,获取指定数据库的某个表的字段信息

    DROP PROCEDURE IF EXISTS Proc; DELIMITER //CREATE PROCEDURE Proc(database_name varchar(50),table_nam ...

  3. JAVA 并发编程-多个线程之间共享数据（六）

    多线程共享数据的方式: 1.假设每一个线程运行的代码同样.能够使用同一个Runnable对象,这个Runnable对象中有那个共享数据,比如,卖票系统就能够这么做. 2,假设每一个线程运行的代码不同. ...

  4. 判断asp.net中session过期方法的比较

    重写继承page的OnInit()虚方法,在需要的界面上,继承这个类. 1.新建继承page类的类JudgeSession,实现接口成员. 2.重写OnInit()方法,判断session情况. 3. ...

  5. hdu 2234(IDA*)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2234 思路:IDA*可以搞,借鉴的是大牛的启发式函数h(): 可以考虑把每一行上的数转化成相同的,或者 ...

  6. subprocess.Popen() 常用方法

    p.stdout.read() :用于读取标准输出,会一次性读取所有内容,返回一个字符串p.stdout.readline() :用于读取标准输出,一次只读取一行内容,返回一个字符串p.stdout. ...

  7. Android无线测试之—UiAutomator UiScrollable API介绍八

    设置滚动方向 一.设置滚动方向相关API 返回值 API 描述 UiScrollable setAsHorizontalList 设置滚动方向为水平滚动 UiScrollable setAsVerti ...

  8. 《Shiro框架》shiro学习中报错解决方法

    [1] 最近在学习shiro,在学习过程中出现了一个问题,报错如下: org.apache.shiro.UnavailableSecurityManagerException: No Security ...

  9. LA3485 Bridge[(辛普森自适应)微积分]

    做此题完全是为了练积分. [普通求导版] Select Code #include<cstdio> #include<cmath> using namespace std; t ...

  10. 使用Fastjson生成Json字符串少字段属性（数据丢失）

    最后是控制台打印生成的结果如下:FastJson生成字符串是:{"id":"2","name":"节点1"," ...