flex布局常用属性
最近喜欢flex布局,它可以完美的实现响应式布局,下边我总结了它的一些常用属性,喜欢的,也可以练习写一下,很好用~~~
注意:使用了flex布局,对于子元素的float
、clear
和vertical-align
属性将失效。
1.以下6个属性设置在容器上
flex-direction | row/row-reverse/column/column-reverse | 决定主轴的方向(即项目的排列方向) |
flex-wrap | wrap/nowrap/wrap-reverse | 决定项目排列方式 |
flex-flow | <flex-direction>|<flex-wrap> | 前两者简写形式,默认flex-flow:row nowrap |
justify-content | flex-start/flex-end/center/space-between/space-around |
决定项目在主轴的对齐方式
|
align-items | flex-start/flex-end/center/baseline/stretch |
定义项目在交叉轴上如何对齐
|
align-content | flex-start/flex-end/center/space-between/space-around/stretch | 定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 |
2.以下6个属性设置在项目上
oreder | .item{order:1} | 定义项目的排列顺序。数值越小,排列越靠前,默认为0。 |
flex-grow | .item{flex-grow:<number>} |
定义项目的放大比例,默认为 (如果所有项目的 |
flex-shrink | .item{flex-shrink:<number>/*default 1*/} | 定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。(如果所有项目的flex-shrink 属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink 属性为0,其他项目都为1,则空间不足时,前者不缩小。) |
flex-basis | .item{flex-basis:length/*default auto*/} | 定义在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto ,即项目的本来大小。(注:它可以设为跟width 或height 属性一样的值(比如350px),则项目将占据固定空间。) |
flex | .item{flex:none} |
是 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。 |
align-self | .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } | 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items 属性。默认值为auto ,表示继承父元素的align-items 属性,如果没有父元素,则等同于stretch 。 |
flex布局常用属性的更多相关文章
- flex布局justify-content属性和align-items属性设置
前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:h ...
- 【Android自学日记】五大布局常用属性
线性布局(LinearLayout)常用属性: android:orientation="vertical"--决定子类控件的排布方式(vertical垂直:horizontal水 ...
- android布局常用属性记录
android布局常用属性记录 http://blog.csdn.net/xn4545945/article/details/7717086这里有一部分别人总结的其余的: align:对齐 par ...
- Flex布局 Flexbox属性具体解释
原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚 ...
- 深入理解line-height与vertical-align——前端布局常用属性
line-height.font-size.vertical-align是设置行内元素布局的关键属性.这三个属性是相互依赖的关系,改变行间距离.设置垂直对齐等都需要它们的通力合作.下面将主要介绍lin ...
- Android 相对布局常用属性
Android 布局属性详解 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 ...
- Android 控件布局常用属性
<!--单个控件经常用到android:id —— 为控件指定相应的IDandroid:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串a ...
- 记录Flex布局的属性
容器属性 flex-dirextion(主轴的方向):>>row(水平) | row-reverse(水平取反) | column(垂直) | column-reverse(垂直取反) f ...
- React Native入门教程 3 -- Flex布局
上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...
随机推荐
- c#通过反射获取自定义属性
PropertyInfo[] properties = typeof(BPM_ContractApproval_Purchase).GetProperties(); foreach (var prop ...
- CSS小随笔(三)浮动与定位
先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存 ...
- Java的HashMap实现原理整理总结
通过Debug 探寻Java-HashMap 实现原理: 一个简单的例子,代码如下, 测试方法 main: public static void main(String[] args) { KeyOb ...
- Java基础---GUI
第一讲 GUI(用户图形界面) 一.概述 1.GUI:GraphicalUser Interface,即图形用户界面,用于计算机与用户交互的一种方式. 2.计算机与用户交互的两种方式:GUI和 ...
- python基础学习(十三)
re模块包含对 正则表达式.本章会对re模块主要特征和正则表达式进行介绍. 什么是正则表达式 正则表达式是可以匹配文本片段的模式.最简单的正则表达式就是普通字符串,可以匹配其自身.换包话说,正则表达式 ...
- 两个input在同一行连着不留缝隙
方法1:让两个input 连在一起写 不换行 <div class="inputDiv"> <input type="text" placeh ...
- CVTE前端笔试编程题
这些题目是做完笔试之后,在别的地方找到的,现在附上. 1.(1)这题考察的怎么把参数转换为数组,然后再截取你想要的位数. function C(){ var a_args=Array.prototyp ...
- 大型网站的 HTTPS 实践(三)——基于协议和配置的优化
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt389 1 前言 上文讲到 HTTPS 对用户访问速度的影响. 本文就为大家介 ...
- poj2942(双联通分量,交叉染色判二分图)
题意:一些骑士,他们有些人之间有矛盾,现在要求选出一些骑士围成一圈,圈要满足如下条件:1.人数大于1.2.总人数为奇数.3.有仇恨的骑士不能挨着坐.问有几个骑士不能和任何人形成任何的圆圈. 思路:首先 ...
- tkinter第一章
tk1 ------------------------------------------------------------------------------------------ impor ...