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 ...
随机推荐
- Pycharm 建立工程，包含多个工程目录
- 005Maven_Myeclipse和Maven整合
准备好:1.Myeclipse2014; 2. E盘下面的:
- Android的Parcelable中describeContents方法的作用
这个方法返回的值通常为0,那什么情况下需要填写其他值呢? 这个方法到目前为止返回其他唯一有效的值就是CONTENTS_FILE_DESCRIPTOR(0x01),指明这个Parcel的内容包含文件描述 ...
- 在其模块列表中有一个错误模块“ManagedPipelineHandler”。
C:\Windows\Microsoft.NET\Framework\v4.0.30319 命令行: aspnet_regiis -i
- TortoiseGit 提交代码每次需要输入用户名和密码？
每次用TortoiseGit Pull或者Push的时候都会弹出让输入用户名.密码的框, 很麻烦 ,解决办法如下: 解决办法如下: Right click → TortoiseGit → Settin ...
- hdu 4496(并查集)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4496. 思路:简单并查集应用,从后往前算就可以了. #include<iostream> ...
- AWS系列-EC2实例选择镜像
Centos Ubuntu Redhat 打开EC2控制台,点击启动实例,选择AWS Marketplace Centos.org说明为centos官网镜像 如下图,这种镜像是收费的镜像 Ubuntu ...
- WPF 单实例应用程序
例如:Microsoft Word,不管打开多少个文档(也不管它们是如何打开的),一次只能加载 winword.exe 一个实例. 这便是单实例应用程序. 对于这种单实例应用程序,WPF 本身并未提供 ...
- 编程之美 set 20 构造数独
1. 朴素 DFS 遍历效率太低, 即便是预先设定 9 个数放到数组再去 DFS, 同样并不高效 2. 在生成一个可行解后, 随机删除一些数字, 删除的数字越多, 数独的难度就越大 3. 正解二. 3 ...
- ArcGIS -- ArcSDE Lock request conflicts with an established lock
1.查询下列表是否有数据 select * from sde.state_locks; select * from sde.object_locks; select * from sde.layer_ ...