1.父元素 属性

display:flex; // 必写

justify-content: XXX; // 设置子容器沿主轴排列

align-items: XXX; // 设置子容器如何沿交叉轴排列

flex-direction: XXX; // 决定主轴的方向,交叉轴的方向由主轴确定。

flex-wrap: XXX; // 设置换行方式

align-content: XXX; // 多行沿交叉轴对齐

2.子元素 属性

flex: XXX; //必写 在主轴上如何伸缩

align-self: XXX; // 单独设置子容器如何沿交叉轴排列

flex-basis: XXX; // 设置基准大小

flex-grow: XXX; // 设置扩展比例

flex-shrink: XXX; // 设置收缩比例

order: XXX; // 设置排列顺序

.

flex布局 (回顾)的更多相关文章

  1. flex布局——回顾

    flex 即为弹性布局. 任何一个容器都可以指定为flex布局. .box{display:flex} 行内元素可以使用flex布局 .box{display: inline-flex} webkit ...

  2. 前端知识点回顾之重点篇——CSS中flex布局

    flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...

  3. flex布局总结回顾

    1.背景 传统css盒式模型,依赖 display属性 + position属性 + float属性实现页面的布局,而随着互联网的迅猛发展,带动了无数的互联网创业者和互联网产品,因而样式布局的美化成为 ...

  4. flex布局应用于踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  5. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  6. 2017年总结的前端文章——一劳永逸的搞定 flex 布局

    flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...

  7. Flex 项目属性:flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  8. flex布局应用与踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  9. 一劳永逸的搞定 FLEX 布局(转)

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

随机推荐

  1. KnockJs 绑定语法

    按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法. 相关的教程大家可以去看 汤姆大叔的博客. 练习代码下载 由于没有环境,代码直接用记事本写的,可能比较乱,仅作 ...

  2. bzoj 4765 普通计算姬 dfs序 + 分块

    题目链接 Description "奋战三星期,造台计算机".小G响应号召,花了三小时造了台普通计算姬.普通计算姬比普通计算机要厉害一些.普通计算机能计算数列区间和,而普通计算姬能 ...

  3. bananahill(NOIP模拟赛Round 8)

    题目描述 香蕉川由座香蕉山组成,第i座山有它的高度.小Z准备从左到右爬这里的恰好座香蕉山,但他不希望山的高度起伏太大,太过颠簸,会让本就体育不好的他过于劳累.所以他定义了爬山的劳累度是所有爬的相邻的两 ...

  4. 【原创】Linux环境下的图形系统和AMD R600显卡编程(6)——AMD显卡GPU命令格式

    前面一篇blog里面描述了命令环缓冲区机制,在命令环机制下,驱动写入PM4(不知道为何会取这样一个名字)包格式的命令对显卡进行配置.这一篇blog将详细介绍命令包的格式. 当前定义了4中命令包,分别是 ...

  5. 华为上机测试题(表达式运算-java)

    PS:自己写的,自测试OK,供大家参考. 补充:数据解析的过程,评论区有更好的处理方式,可参考. /* * 输入一个表达式,3*8+7-2,没有括号 输出结果 */ /* 本程序暂不考虑容错处理 */ ...

  6. TOTP:Time-based One-time Password Algorithm

    转自: http://www.cnblogs.com/dyingbleed/archive/2012/12/05/2803782.html http://en.wikipedia.org/wiki/T ...

  7. linux Centos7 安装Samba服务

    1. 使用Samba服务器需要防火墙开放以下端口 UDP 137 UDP 138 TCP 139 TCP 445 如果碰到 “Unable to save xxxxxxxx 拒绝访问” 的提示,还有最 ...

  8. hdu 5159(概率)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5159 题解:假设在 x 张牌中选b张牌,那么有 x^b 种选法,如果在 (x-1) 张牌中选 b 张 ...

  9. FTP-Filezilla首次配置

    最新新弄了个服务器,先吐槽下,之前买镜像都是免费的,昨天试了,竟然收费.... 好吧,用户多了也正常. 代码发布之前都是很暴力的直接远程桌面然后粘贴,有个合作伙伴突然需要FTP,说之前用的就是,我就做 ...

  10. linq连接sqlite数据库(linq to sqlite) .net3.5

    http://www.cnblogs.com/xianyin05/archive/2012/12/23/2829905.html using Models; using System; using S ...