一、order属性

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

二、flex-grow属性

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

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

三、flex-shrink属性

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

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

四、flex-basis属性

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

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

五、flex属性

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

六、align-self属性

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

Flex 布局教程:语法篇

CSS3 Flex布局(项目)

CSS3 Flex布局(项目)的更多相关文章

  1. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

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

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

  3. CSS3 Flex布局整理(一)

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

  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. css3 flex布局结合transform生成一个3D骰子

    预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...

  9. css3 flex布局/grid布局

    1.CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程) 2.CSS Grid 布局完全指南(图解 Grid 详细教程)

随机推荐

  1. C++/C混合编程

    C与C++混合编程 C++ 是在 C 语言的基础上发展起来的.在某种程度上,我们可将 C++ 看做 C 的一种扩展.在本质上,二者的数据类型和函数调用惯例都是一致的,因此 C 与 C++ 混合编译也是 ...

  2. 《深入理解Nginx:模块开发与架构解析》(一)

    第1章 研究 Nginx 前的准备工作 1.1 Nginx 是什么 Web 服务器的基本功能:基于 REST 架构风格,以统一资源描述符(URI)或者统一资源定位符(URL),作为沟通依据,通过 HT ...

  3. python重置变量 sys.defaultencoding

    <span style="font-family: Arial, Helvetica, sans-serif;">比如重置变量defaultencoding为utf-8 ...

  4. MVC Controller return 格式之JsonResult、ContentResult、RedirectResult……

      //语法 public class JsonResult : ActionResult public class ContentResult : ActionResult public class ...

  5. 手动grub引导redhat

    grub是redhat默认的引导程序,在安装redhat时会提示是否安装bootloader,但自己手贱选择不安装,待系统重启时就是grub命令行界面,不能直接进系统.瞬时感觉麻烦大了,只能手动输入咯 ...

  6. layui实现table表格的“关键字搜索”功能

    $('#searchBtn').on('click',function(){ var type = $(this).data('type'); active[type] ? active[type]. ...

  7. size_t ssize_t loff_t 的区别

    Ssize_t 与size_t 跟踪linux源码得到以下宏: #ifndef _SIZE_T #define _SIZE_T typedef __kernel_size_t         size ...

  8. phpexcel图形图表(一)入门

    PHPExcel - Excel的PHP处理引擎 PHPExcel 提供了一系列的 PHP语言 类,让你可以轻松地读写操作以下格式的文件:.xls/.xlsx/.csv/.ods/Gnumeric/P ...

  9. HashMap? ConcurrentHashMap?

    前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 ...

  10. HashMap与HashTable原理及数据结构

    HashMap与HashTable原理及数据结构 hash表结构个人理解 hash表结构,以计算出的hashcode或者在hashcode基础上加工一个hash值,再通过一个散列算法 获取到对应的数组 ...