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. [poj_3469]多核CPU

    Sample Input 3 1 1 10 2 10 10 3 2 3 1000 Sample Output 13 最小割,把模块看做点,建源点s和汇点t,以下(a,b,c)表示从a向b连一条容量为c ...

  2. 《Linux命令、编辑器与shell编程》第三版 学习笔记---001

    Linux概述 1.具有内核编程接口 2.支持多用户(同时) 3.支持多任务 4.支持安全的分层文件系统 a.标准 b.链接 c.权限 5.shell(命令解释器和编程语言) a.文件名生成(通配符和 ...

  3. JS打印——第三方控件打印

    LODOP 官方地址:http://www.lodop.net/ 一个很好的打印控件,可以是实现纸张设置.横打竖打.打印预览.打印维护多种功能.官网的示例非常详细.能很好支持多种浏览器的打印. 在使用 ...

  4. log4j配置文件动态指定日志文件名称

    我们在项目当中经常会使用log4j进行日志记录,偶尔会遇到一些要求,比如日志文件名称按照启动参数动态配置,而不去修改log4j.xml,比较简单的一种做法是,通过设置系统属性的方式实现,代码: if( ...

  5. python爬虫beautifulsoup4系列1【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/beautifulsoup4/ 前言 以博客园为例,爬取我的博客上首页的发布时间.标题. ...

  6. jquery mloading

    在执行jQuery的ajax时,有的时候请求回来会有较长时间,这个时候,如果什么都没有显示,用户会觉得网站卡住了,所以这个时候,来个mloading会使用户体验更好些. 使用方法很简单 将jquery ...

  7. cl编译C文件的环境变量修改

    添 加环境 变量INCLUDEC:\Program Files (x86)\Windows Kits\10\Include\10.0.10240.0\ucrt;C:\Program Files (x8 ...

  8. POJ 2184 Cow Exhibition【01背包+负数(经典)】

    POJ-2184 [题意]: 有n头牛,每头牛有自己的聪明值和幽默值,选出几头牛使得选出牛的聪明值总和大于0.幽默值总和大于0,求聪明值和幽默值总和相加最大为多少. [分析]:变种的01背包,可以把幽 ...

  9. ZOJ18th省赛 Lucky 7

    [线上网址](http://acm.zju.edu.cn/onlinejudge/showContestProblems.do?contestId=378) BaoBao has just found ...

  10. 模拟【p2239】 螺旋矩阵

    顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述--->p2239 螺旋矩阵 看到题,很明显,如果直接模拟的话,复杂度为\(O(n^2)\)过不去.(这个复杂度应该不正确,我不会分 ...