C-Flex 与 box布局教程
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -阮一峰老师
http://www.w3cplus.com/css3/flexbox-layout-and-calculation.html
display:flex 盒子使用弹性盒模型
flex:1; 占容器的比例 1/总部分
flex混合划分 适用于:图文混排
dispaly:flex
.item1 width:100px
.item2 flex:2
.item3 flex:1
不定宽高水平垂直居中方案
1 绝对定位absolute top:50% left:50% transform:translate(-50%,-50%);
2 flexbox版 .parent{justify-content:center;align-items:center;display:flex;}
兼容性:ios兼容最新flex android 4.4- 只兼容flexbox 4.4+兼容最新版flex布局
Flex:弹性盒模型 适用于所有元素,使用后 float 、clear、vertical-align 失效
容器属性
容器的属性
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content 水平方向上
align-items 垂直方向上
align-content // wrap多行时才有用
.wrap{
display:-webkit-flex; /safari/
display:flex;
}
.wrap{ // 行内元素
dispaly:inline-block;
}
.wrap {
flex-flow: <flex-direction> || <flex-wrap>; // flex-direction(布局方向) 和 flex-wrap(换行)的复合属性
}
flex-direction:row
可能有四个值
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
flex-wrap:nowrap 不换行
nowrap 不换行
wrap 换行
wrap-reverse; 反向换行(序列号小的在下一行)
.wrap {
justify-content: flex-start | flex-end | center | space-between | space-around; // 定义了项目在主轴上的对齐方式 水平方向如何布局
}
flex-start:从左往右对齐
flex-end:从右往左对齐
center: 中间对齐两端间隔不同(与text-align:center或margin:0 auto 类似)
space-between: 中间对齐两边紧贴,其他间隔相同
space-around: 中间对齐两边不紧贴,其他间隔相同
.wrap {
align-items: flex-start | flex-end | center | baseline | stretch; 属性定义项目在交叉轴上如何对齐 垂直方向如何对齐
}
flex-start: 顶部对齐
flex-end : 底部对齐
center: 垂直居中
strentch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度 ,设置顶部对齐
baseline: 项目的第一行文字的基线对齐
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线(一行内容),该属性不起作用
.wrap {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start
:与交叉轴的起点对齐(顶部对齐)。flex-end
:与交叉轴的终点对齐(底部对齐)。center
:与交叉轴的中点对齐(多行垂直居中)。space-between
:与交叉轴两端对齐(顶部 底部对齐),轴线之间的间隔平均分布。space-around
:每根轴线(每行)两侧的间隔都相等。所以,轴线之间(行间)的间隔比轴线与边框的间隔大一倍(距离上边距距离相等)。stretch
(默认值):轴线占满整个交叉轴(每行下边界相同)。
项目属性
可以使用在项目中的属性:
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink 了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis 在分配多余空间之前,项目占据的主轴空间(main size)
flex flex-grow, flex-shrink 和 flex-basis的简写
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
.item {
order: <integer>;
}
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 .item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 .item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 .item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width
或height
属性一样的值(比如350px),则项目将占据固定空间。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 .item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 .item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
C-Flex 与 box布局教程的更多相关文章
- 【前端】display: box布局教程 [转]
css display:box 新属性 一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 ...
- Flex 布局教程:实例篇(转)
你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...
- (转)Flex 布局教程:
这个博客的内容比较新,多看看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [语法篇] http://www.ruanyifeng. ...
- Flex 布局教程:实例
分类: 开发者手册 Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...
- display:flex 布局教程,弹性布局!
display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- CSS学习笔记(12)--Flex 布局教程:实例篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...
- 二、Flex 布局教程:实例篇
注:本文转自大神阮一峰,自己加了少许改动~ 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解 ...
- Flex 布局教程:语法和实例
语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便, ...
- Flex 布局教程:实例篇【转】
Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...
随机推荐
- 边看MHA源码边学Perl语言之一开篇
边看MHA源码边学Perl语言之一开篇 自我简介 先简单介绍一下自己,到目前为此我已经做了7年左右的JAVA和3年左右php开发与管理,做java时主要开发物流行业的相关软件,对台湾快递,国际快递,国 ...
- Java GC 日志详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt105 java GC日志可以通过 +PrintGCDetails开启 以Pa ...
- spring cloud+docker 简单说一说
spring boot 微服务开发工具 spring cloud 微服务框架治理工具集 这么做: 1.搭建spring cloud 基础组件(服务发现,服务注册,服务配置,监控,追踪,API网关) 以 ...
- EF增删改查+使用Expression进行动态排序分页
注:以下部分来自<ASP.NET MVC 企业级实战>一书的摘抄和改写以及部分个人学习心得. EF简单增删改查 增加 public static int Add() { using (No ...
- Project 3:N级魔方阵
魔方阵:由n*n个数字所组成的n阶方阵,具有各对角线,各横列与纵行的数字和都相等的性质,称为魔方阵.而这个相等的和称为魔术数字.若填入的数字是从1到n*n,称此种魔方阵为n阶正规魔方阵. 目标:输入一 ...
- 只查看tomcat进程,不包括grep
ps aux | grep tomcat | grep -v "grep" | awk '{print $2}'
- 团队作业5——测试与发布(Alpha版本)
Deadline: 2017-5-7 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的两个方面 测试报告 发布说明 晚交 - 0分 迟交一周以上 - 倒扣本次作业 ...
- 【2017集美大学1412软工实践_助教博客】团队作业8——第二次项目冲刺(Beta阶段)
题目 团队作业8: http://www.cnblogs.com/happyzm/p/6856179.html 团队作业8-1 beta冲刺计划 团队 新加入的成员,担当的角色,技术特点 下一阶段需要 ...
- 团队作业8——Beta 阶段冲刺2rd day
一.今日站立式会议照片 二.每个人的工作 (1) 昨天已完成的工作: 今天是冲刺阶段的第二天,冲刺第一天我们完成了对于前端界面的改进与完善工作. (2) 今天计划完成的工作: 成员 昨天已完成的工作 ...
- 201521123007《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题目4-1) private static ...