直接上代码：

<!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. Ubuntu之No module named cv2

    最简单的方法是:pip install opencv-python 另外,从源码安装的方法: 1下载opencv源码:http://opencv.org/releases.html  推荐2.4.13 ...

  2. tensorflow 保存训练模型ckpt 查看ckpt文件中的变量名和对应值

    TensorFlow 模型保存与恢复 一个快速完整的教程,以保存和恢复Tensorflow模型. 在本教程中,我将会解释: TensorFlow模型是什么样的? 如何保存TensorFlow模型? 如 ...

  3. mulitp request

    1.设置cookie 2.设置header 3.通过requst.getInputStream(); 4.通过request.getsession();

  4. CDialog与CDialogEx的区别联系

    CDialogEx是VS2003之后出现的,VC++6.0没有.CDialogEx = CDialog ExtendExtend的意思是扩展,即扩展的CDialog! 这个类是CDialog的扩展类, ...

  5. ASP.NET MVC - The view must derive from WebViewPage, or WebViewPage<TModel>

    当通过一个空的站点构建ASP.NET MVC时经常会出现各种配置缺少的问题,最简单但的办法是吧VS自动生成的web.config文件拷贝到对应的目录下面 The view must derive fr ...

  6. 剑指 offer set 16 数字在排序数组中出现的次数

    总结 1. Leetcode 上有一道题, 求某一个数字在有序数组中出现的最左位置和最右位置, 而这道题就是那题的变形

  7. hdu1024(最大m串子序列)

    m的范围没给,很坑爹 Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  8. dede标签:arclist标签使用大全

    特别提示:arclist是织梦建站系统中最重要的标签,同时也是最基础的标签,希望大家熟练掌握,可以说是学习织梦必备知识. 标签名称:arclist标记简介:织梦常用标记,也称为自由列表标记,其中img ...

  9. Python全栈day13（作业讲解字典嵌套实现用户输入地址信息添加及查看）

    要求: 列出字典对应节点名称,根据用户输入可以添加节点,查看节点等功能,这里以地址省-市-县等作为列子,此题熟悉字典嵌套功能 vim day13-16.py db = {} path = [] whi ...

  10. JavaScript学习（5）-Image对象和动态HTML

    JavaScript学习5 1.image 对象 对象引用 document.images[n] document.images["imageName"] document.ima ...