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 ...
随机推荐
- Spring Cloud 架构
我们从整体来看一下Spring Cloud主要的组件,以及它的访问流程 1.外部或者内部的非Spring Cloud项目都统一通过API网关(Zuul)来访问内部服务. 2.网关接收到请求后,从注册中 ...
- Merging an upstream repository into your fork
1. Check out the branch you wish to merge to. Usually, you will merge into master. $ git checkout ma ...
- 前端gulp自动化构建配置
为了节省http请求次数.节约带宽,加速页面渲染速度,达到更好用户体验的目的.现在普遍的做法是在上线之前做静态资源的打包构建,也就是静态资源的合并压缩: 这里使用的是gulp,当然现在有更强大的模块化 ...
- PHP中strlen和mb_strlen函数的区别
strlen strlen — 获取字符串长度 int strlen ( string $string ) 返回给定的字符串 string 的长度. mb_strlen int mb_strlen ( ...
- <LeetCode OJ> 217./219. Contains Duplicate (I / II)
Given an array of integers, find if the array contains any duplicates. Your function should return t ...
- Oracle dbms_random随机数包详解
Oracle dbms_random包主要用于获得随机数,可以为数字也可以为字母等,还可以实现混拼.常用函数如下: dbms_random.value 生成一个指定范围的38位随机小数(小数点后38位 ...
- VC++ Splash Window封装类CSplash
Splash.h 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 ...
- iOS 关于 UIKit 专栏应该写在最前面的话
iOS 关于 UIKit 应该写在最前面的话 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协 ...
- 打印出现：You've implemented -[<UIApplicationDelegate> application:didReceiveRemoteNotification：
解决办法: 第一种:Product -> Target -> Capabilities -> Background Modes -> 勾选Remote notification ...
- Android无线测试之—UiAutomator UiScrollable API介绍六
向前与向后滚动API 一.向前与向后滚动相关API 返回值 API 描述 boolean scrollBackward(int steps) 自动以步长向后滑动 boolean scrollBackw ...