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. UML笔记(3):顺序图、Sequence Diagram

    http://www.cnblogs.com/xueyuangudiao/archive/2011/09/22/2185364.html 目录 含义 要素: 1 活动者 2 对象 3 生命线 4 控制 ...

  2. electron 安装使用

    1.安装 node.js 链接:http://pan.baidu.com/s/1o7W7BIy 密码:y6od 一路next 我安装在F:\Program Files\node.js下 2.检查nod ...

  3. Linux使用命令记录

    1.对一个文件夹中所有的文件进行修改权限: • chmod –R 777 aa (- R 递归式改变指定目录及其所目录文件拥者) • 目录/his及其所文件目录,chown - R www.www / ...

  4. hdu 5062(水题)

    Beautiful Palindrome Number Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  5. Hmailserver搭建邮件服务器

    Hmailserver安装很简单不需要多说,自己去百度 Hmailserver配置: 输入安装时设置的密码登录Hmailserver 添加域名,如:域名是:mail.abc.com这里添加的时候应该填 ...

  6. Codeforces Round #446 (Div. 2) C. Pride【】

    C. Pride time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  7. Python的支持工具[0] -> 环境包管理工具[0] -> pip

    pip包管理工具 / pip Package Management Tools pip是一个Python包管理工具,主要是用于安装PyPI上的软件包,可以替代easy_install工具. 1 pip ...

  8. LCA【bzoj3364】 [Usaco2004 Feb]Distance Queries 距离咨询

    Description  奶牛们拒绝跑马拉松,因为她们悠闲的生活无法承受约翰选择的如此长的赛道.因此约翰决心找一条更合理的赛道,他打算咨询你.此题的地图形式与前两题相同.但读入地图之后,会有K个问题. ...

  9. Ugly Number II -- LeetCode

    Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...

  10. LA 3026 Period

    这只是蓝书上的一道KMP水题...然后对于最长前缀的循环证明我就不说了... #include<iostream> #include<cstring> #include< ...