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 ...
随机推荐
- Python之修改文件MD5值
import os def fileAppend(filename): myfile = open(filename,'a') myfile.write("####&&&am ...
- 一个区域只能放置一个组件，如果想在一个区域放置多个组件就需要使用Panel来装载
五种布局管理器: Flow Layout(流式布局):按照组件添加到容器中的顺序,顺序排放组件位置.默认为水平排列,如果越界那么会向下排列.排列的位置随着容器大小的改变而改变. Panel默认的布局管 ...
- Unity5 AssetBundle打包加载及服务器加载
Assetbundle为资源包不是资源 打包1:通过脚本指定打包 AssetBundleBuild ab = new AssetBundleBuild ...
- 【BZOJ】1628 && 1683: [Usaco2007 Demo]City skyline 城市地平线（单调栈）
http://www.lydsy.com/JudgeOnline/problem.php?id=1628 http://www.lydsy.com/JudgeOnline/problem.php?id ...
- STL容器：list双向链表学习
list是一个双向列表容器,完成了标准C++数据结构中链表的所有功能; list与vector和deque类似,只不过其中的对象提供了对元素的随机访问. STL以双向链表的方式实现list,访问需要从 ...
- （转）有关thread线程
Python 标准库提供了 thread 和 threading 两个模块来对多线程进行支持.其中, thread 模块以低级.原始的方式来处理和控制线程,而 threading 模块通过对 thre ...
- 用Python获取Linux资源信息的三种方法
方法一:psutil模块 #!usr/bin/env python # -*- coding: utf-8 -*- import socket import psutil class NodeReso ...
- windows 系统重装之后怎么恢复oracle数据库
今天单位的服务器系统进不去了,重做了系统,有重要的oracle数据,经理让我恢复一下oracle数据,试着尝试了一下 1.首先,将原来的ORACLE文件夹改名,原来的路径是D:/oracle.我暂时改 ...
- 【javaScript基础】马上调用函数表达式
在javaScript中,每一个函数被调用时,都会创建一个新的运行上下文.由于在一个函数里面定义的变量和函数仅仅能在里面訪问.在外面是不行的.上下文提供了一种非常easy的方法来创建私有性. //ma ...
- IOS 开发之 -- 过滤掉字符串里面所有的非法字符 字典和json之间的互转
比如一个字符串: NSString * hmutStr = @"(010)*(123)E6(234)**150-1111-^^-1234#" 很多时候,数据之间的传输,我们仅仅只想 ...