Flex布局介绍
Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局。
.box{
display: -webkit-flex; /* Safari */ //考虑兼容
display: flex;
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
父属性(作用于父级div等元素)
1.flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
→ ← ↓ ↑
}
2 flex-wrap属性
默认情况下,项目都排在一条线上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
不换行 换行 向上换行
}
3 flex-flow(常用属性)
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
4 justify-content属性(常用属性)
justify-content属性定义了项目在x轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
→ ← 居中 中间留空 头尾中间都留空
}
5 align-items属性(y轴)(常用属性)
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch
顶对齐,底对齐,中部对齐,首行对齐,充满
}
6 align-content属性(y轴)
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
(请对照 align-items属性)
}
子属性 (作用于子级div等元素)
1 order属性(常用属性)
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
2 flex-grow属性(比例属性)
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
值大于等于0,0代表不缩小,其他的当空间不足时按比例比例缩小
4 flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
5 flex属性(常用属性)
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6 align-self属性(y轴)(常用属性)## 标题 ##
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
(请对照 align-items属性)
}
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
Flex布局介绍的更多相关文章
- CSS之FLex布局介绍
网页布局(layout)是CSS的一个重点应用. img 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如, ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- Flex布局教程及属性速查
一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...
- React-Native基础_3.Flex布局
Flex布局介绍 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ 'use st ...
- 学好Flex布局并不容易
1. Flex布局介绍 CSS的传统布局解决方案,基于盒状模型,依赖display属性.position属性.float属性,对于一些特殊的布局,例如垂直居中,往往要想很多hack的方法来解决. 20 ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
随机推荐
- java 面试,如何提升自己的实力,摘自 java web轻量级开发面试教程
本内容摘自 java web轻量级开发面试教程 其中有一段讲述到了实习经验对找工作的帮助 1.2.2大学阶段的实习经验能帮到你 一般公司在筛选简历时,一个非常重要考察的要点是相关经验的工作年限,说一个 ...
- vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑😊)
转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...
- python+selenium自动化软件测试(第13章):selenium面试题
前言最近看到群里有小伙伴贴出一组面试题,最近又是跳槽黄金季节,小编忍不住抽出一点时间总结了下 一.selenium中如何判断元素是否存在?expected_conditions模块提供了16种判断方法 ...
- [小北De编程手记] [Lesson 02] AutoFramework构建 之 Page Objects - 设计模式
写在最前面 这个系列的主旨是要跟大家分享一下关于自动化测试框架的构建的一些心得.这几年,做了一些自动化测试框架以及团队的构建的工作.过程中遇到了很多这样的同学,他们在学习了某一门语言和一些自动化测试的 ...
- Begin the new life as a coder
今天刚刚开通博客园的博客频道,这里将成为自我成长点滴记录的土壤!从今天开始,从这篇博文开始,我将分享自己从一个fresher开始的成长经历.原与广大仁人志士共同在程序中共享快乐!我真是太高兴了 :D
- 云计算的三种服务模式IaaS、PaaS和SaaS的差别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt363 云服务"现在已经快成了一个家喻户晓的词了.如果你不知道Paa ...
- poj 2455 二分+最大流
这个因为点少用邻接矩阵做的. 题意:求由1到n的t条不重复路径中最大边权值的最小值. 思路:先对边权进行排序,然后二分边权值,建图求从1到n的最大流,当最大流为t时便求出答案. 代码: #includ ...
- poj 3683 2-sat建图+拓扑排序输出结果
发现建图的方法各有不同,前面一题连边和这一题连边建图的点就不同,感觉这题的建图方案更好. 题意:给出每个婚礼的2个主持时间,每个婚礼的可能能会冲突,输出方案. 思路:n个婚礼,2*n个点,每组点是对称 ...
- 团队作业8----第二次项目冲刺(Beta阶段) 第七天
BETA阶段冲刺第六天 1.小会议ing 2.每个人的工作 (1)昨天已完成的工作 完成查重部分 (2) 今天计划完成的工作 (3) 工作中遇到的困难: 尤少辉:在测试的时候发现了,文件名保存到数据 ...
- 201521123087《Java程序设计》 第八周学习总结
1. 本周学习总结 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1)1.1 实验总结 ...