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. 我对 aspnetpager和repeater以及查询条件的封装

    /// <summary>         /// 绑定所有图片列表         /// </summary>         /// <param name=&qu ...

  2. 自定义Windows服务并实施安装

    1.新建项目DemoService,并添加windows服务,命名DemoService 2.添加代码 using System; using System.Collections.Generic; ...

  3. 嵌入式Linux中摄像头使用简要整理【转】

    转自:http://www.cnblogs.com/emouse/archive/2013/03/03/2941938.html 本文涉及软硬件平台: 开发板:飞凌OK6410 系统:Ubuntu 1 ...

  4. 我和阿里云RDS的故事

    于阿里云的RDS性能无法满足我们公司系统的要求,数据库偶尔出现莫名的查询慢(索引等做了全面优化)经过好多次投诉,情况还是没有改善.由于是类金融的系统,对这种情况是不能接受的.相信系统数据有5G以上有人 ...

  5. Ionic Angular自动捕获错误 配置Angular2.x +

    配置app.module.ts import { Pro } from '@ionic/pro'; // These are the imports required for the code bel ...

  6. [BZOJ1997][Hnoi2010]Planar 2-sat （联通分量） 平面图

    1997: [Hnoi2010]Planar Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2317  Solved: 850[Submit][Stat ...

  7. Hadoop打包成jar包在集群上运行时出现的各种问题以及解决方案

    之前将eclipse下编好的mapreduce代码放到集群上面跑,发现速度很慢,namenode节点的cpu和内存使用率很低,datanode节点基本上处于没有运行的状态,然后通过查看hadoop-e ...

  8. Codeforces 246E - Blood Cousins Return （树上启发式合并）

    246E - Blood Cousins Return 题意 给出一棵家谱树,定义从 u 点向上走 k 步到达的节点为 u 的 k-ancestor,每个节点有名字,名字不唯一.多次查询,给出 u k ...

  9. 洛谷——2639[USACO09OCT]Bessie的体重问题Bessie's We…——01

    题目描述 Bessie像她的诸多姊妹一样,因为从Farmer John的草地吃了太多美味的草而长出了太多的赘肉.所以FJ将她置于一个及其严格的节食计划之中.她每天不能吃多过H (5 <= H & ...

  10. [Contest20180418]数学竞赛

    题意:初始时$x=0$(长度),当$x$为长度时,你可以把$x$变成$\sin^{-1}x,\cos^{-1}x,\tan^{-1}x$之一($x$变为角度),若$x$为角度,你可以把$x$变成$\s ...