flex布局

来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool


采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器的属性

  • flex-direction 决定主轴的方向

    row(默认值):主轴为水平方向,起点在左端。
    row-reverse:主轴为水平方向,起点在右端。
    column:主轴为垂直方向,起点在上沿。
    column-reverse:主轴为垂直方向,起点在下沿。

  • flex-wrap 定义如果一条轴线排不下,如何换行

    nowrap(默认):不换行。

    wrap:换行,第一行在上方。

    wrap-reverse:换行,第一行在下方。

  • flex-flow 是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

    flex-flow: || ;

  • justify-content 定义了项目在主轴上的对齐方式

flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

  • align-items 定义项目在交叉轴上如何对齐

    flex-start:交叉轴的起点对齐。
    flex-end:交叉轴的终点对齐。
    center:交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

  • align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    flex-start:与交叉轴的起点对齐。
    flex-end:与交叉轴的终点对齐。
    center:与交叉轴的中点对齐。
    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch(默认值):轴线占满整个交叉轴。

项目的属性

  • order 定义项目的排列顺序。整数,可以为负值,数值越小,排列越靠前,默认为0。

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

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

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

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

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

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

  • flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为 0 1 auto

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

    flex: 1 ; => flex : 1 1 0%; 表示在分配前不占据主轴空间,根据剩余或缺少的部分等比放大和缩小的项目;

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

网格布局

基本网格布局

<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>
.Grid {
display: flex;
} .Grid-cell {
flex:;
}

百分比布局

auto: 大小随容器伸缩不固定,因此设置为flex: 1 (flex: 1 1 0%);

1/2: 大小固定占据容器宽度50%,flex: 0 0 50%;

1/3: 大小固定占据容器宽度50%,flex: 0 0 33.3%;

1/4: 大小固定占据容器宽度50%,flex: 0 0 25%;

原文:https://www.cnblogs.com/simpul/p/11020114.html

前端知识点回顾之重点篇——CSS中flex布局的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. 前端知识点回顾之重点篇——CSS中的BFC

    BFC布局(Block Formatting Contexts) 来源:https://www.cnblogs.com/lzbk/p/6057097.html 块级格式化上下文是页面中的一块渲染区域, ...

  3. 前端知识点回顾之重点篇——ES6的Promise对象

    Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...

  4. 前端知识点回顾之重点篇——CORS

    CORS(cross origin resource sharing)跨域资源共享 来源:http://www.ruanyifeng.com/blog/2016/04/cors.html 它允许浏览器 ...

  5. 前端知识点回顾之重点篇——AJAX

    Ajax(Asynchronous JavaScript and XML) 这种技术就是无须刷新页面即可从服务器中取得数据,但不一定是XML数据.在原生方法上,Ajax技术的核心是XMLHttpReq ...

  6. 前端知识点回顾之重点篇——ES6的async函数和module

    async函数 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是 Generator 函数的语法糖 什么是语法糖? 意指那些没有给计算机语言添加新功能,而只是 ...

  7. 前端知识点回顾之重点篇——JavaScript异步机制

    JavaScript异步机制 来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队 ...

  8. 前端知识点回顾之重点篇——jQuery实现的原理

    jQuery jQuery的实现原理 参考:https://blog.csdn.net/zhouziyu2011/article/details/70256659 外层沙箱和命名空间$ 为了避免声明了 ...

  9. 前端知识点回顾之重点篇——ES6的Iterator和Generator

    Iterator 迭代器是一种接口.是一种机制. 为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iter ...

随机推荐

  1. android Camera 之 ZSL

    ZSL的概念 ZSL (zero shutter lag) 中文名称为零延时拍照,是为了减少拍照延时,让拍照&回显瞬间完成的一种技术. Single Shot 当开始预览后,sensor 和  ...

  2. Spring中获取外部配置文件中的属性值

    很多时候需要将配置信息从程序中剥离粗来,Spring现在提供的方法是通过@Value注解和<context:placeholder>来获取配置文件中的配置信息.这里给出一个简单的例子. 首 ...

  3. Mac OS 查看端口和杀死进程

    查看sudo lsof -i:port (端口号) sudo lsof -i:9501 COMMAND PID USER FD TYPE DEVICESIZE/OFF NODE NAME php 77 ...

  4. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

  5. ElasticSearch(十四):Linux下设置ElasticSearch 开机自启

    一.创建脚本文件 在  /etc/init.d  目录下,创建脚本文件 elasticsearch # cd /etc/init.d/ # vim elasticsearch 将以下内容写入文件中(其 ...

  6. 【VNCserver】Centos7.4安装VNC连接华为云或亚马逊云

    1.1 文档背景 CentOS 7 / RHEL 7部署图形化界面 安装VNCserver实现linux系统云主机桌面化,通过普通用户实现桌面化操作 2.  Vncserver服务端部署 2.1 安装 ...

  7. c#中的解析HTML组件 -- (HtmlAgilityPack,Jumony,ScrapySharp,NSoup,Fizzler)

    做数据抓取,网络爬虫方面的开发,自然少不了解析HTML源码的操作.那么问题来了,到底.NET如何来解析HTML,有哪些解析HTML源码的好用的,有效的组件呢?   作者在开始做这方面开发的时候就被这些 ...

  8. 201671030102陈飞 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十四 团队项目评审&课程学习总结 课程学习目标 1.掌握软件项目评审会议流程 ...

  9. laravel 配置路由 api和web定义的路由的区别详解

    1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...

  10. IEnumerable,ICollection ,

    一般规定——IEnumerable < >(MSDN:http://msdn.microsoft.com/en-us/library/system.collections.ienumera ...