一、Flex布局中 Flex Item属性控制,可以指定显示顺序、剩余空间的放大,缩小、交叉轴的排列

1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0。类似z-index

2.flex:是flex-grow,flex-shrink和flex-basis的简写

3.align-self:允许单个项目和其他项目不一样。

二、order

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item {
order: <integer>;
}

三、flex

flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

1.flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

number为0-1之间的数值,指定占据剩余空间的比例

2.flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

3.flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item {
flex-basis: <length> | auto; /* default auto */
}

它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

四、align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

更多:

CSS3 Flex布局整理(二)-容器属性

CSS3 Flex布局整理(一)

Css3动画库收集

CSS3 Flex布局整理(三)-项目属性的更多相关文章

  1. CSS3 Flex布局整理(二)-容器属性

    一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...

  2. CSS3 Flex布局整理(一)

    一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...

  3. CSS3 Flex布局(项目)

    一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...

  4. CSS3 Flex布局(伸缩布局盒模型)学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  5. CSS3 Flex布局(容器)

    一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...

  6. CSS3 Flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  7. css3 flex 布局

    今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...

  8. [续更]一起来撸一下Flex布局里面的那些属性

    Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...

  9. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

随机推荐

  1. STM32应用实例五:与SHT1X温湿度传感器通讯

    在这次项目开发中应用到了SHT1X温湿度传感器,该系列有SHT10.SHT11和SHT15,属于Sersirion温湿度传感器家族中的贴片封装系列.包括一个电容性聚合体测湿敏感元件.一个用能隙材料制成 ...

  2. 错误/异常:java.io.FileNotFoundException: .\src\db.properties (系统找不到指定的路径。);的解决方法

    1.异常视图 2.解决方法 与之相关的部分代码: static{ try { //读取db.properties Properties props = new Properties(); FileIn ...

  3. SPLAY,LCT学习笔记(二)

    能够看到,上一篇的代码中有一段叫做find我没有提到,感觉起来也没有什么用,那么他的存在意义是什么呢? 接下来我们来填一下这个坑 回到我们的主题:NOI 2005维修数列 我们刚刚讨论了区间翻转的操作 ...

  4. 《转》String,StringBuffer与StringBuilder的区别??

    String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主要性能 ...

  5. PR2017添加字幕文本或文字水印

    1.新建一个文本图层(先点击下右下方区域,避免新建图层是灰色不可用) 2.可以看到已经新建了一个文本图层,然后可以在效果控件修改属性,可以用文字工具在文字的地方进行修改文本.(注意点击T图标才能编辑文 ...

  6. poj 2406 求字符串中重复子串的个数

    Sample Input abcdaaaaababab.Sample Output 1 //1个abcd4 //4个a3 //3个ab #include<stdio.h> #include ...

  7. 016 SpringMVC中重定向

    1.介绍 2.index <%@ page language="java" contentType="text/html; charset=utf-8" ...

  8. cookie、sesion

    关于保存问题 如果高并发不多的话可以保存session 否则用cookie吧,session可以保存到其他服务器哦,比如其他服务器的redis memacache(没有持久化,崩了登录信息就全没了) ...

  9. centos关机、重启、图形界面与命令行界面切换命令

    1.关机: init0;  poweroff;  halt;  shutdown 2.重启: init1;  reboot; 3.图形界面切换到命令行界面: init3; 或者,修改配置文件: #vi ...

  10. 二分搜索-HihoCoder1139

    题目描述: 由于自己“想得太多”,导致自己读了半天题才理解了题意.我还以为索敌值会随着每一次到达战略点而减小,结果题意是索敌值是固定了的,并不会改变. 如下是我对题目中第一个案例的分析: 每个圆圈代表 ...