一，概念

　　flexible box ,意为“弹性布局”，用来为盒状模型提供最大的灵活性。

　　块级布局更侧重于垂直方向，行内布局更侧重于水平方向，于此相对的，弹性盒子布局算法是方向无关的。

　　块级flex布局：

　　

.box{

  display: flex;

}

　　行内元素flex布局：

.box{

  display: inline-flex;

}

　　webkit内核的浏览器，必须加上-webkit前缀：

　　

.box{

  display: -webkit-flex; /* Safari */

  display: flex;

}

注意：设为flex布局以后，子元素的float,clear和vertical-align属性将失效。

二，基本概念

　　采用flex布局的元素，简称“容器”；

　　它的所有子元素自动成为容器成员，称为“项目”。

三，容器的属性：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

　　3,1  flex-direction:

　　　　flex-direction属性决定主轴的方向（即项目的排列方向）。

　　　　

.box {

  flex-direction: row | row-reverse | column | column-reverse;

}

　　　　

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿.
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #content {

            width: 200px;

            height: 200px;

            border: 1px solid #c3c3c3;

            display: -webkit-flex;

            -webkit-flex-direction: column-reverse;

            display: flex;

            flex-direction: column-reverse;

        }

        #box {

            width: 50px;

            height: 50px;

        }

        #content1 {

            width: 200px;

            height: 200px;

            border: 1px solid #c3c3c3;

            display: -webkit-flex;

            -webkit-flex-direction: row-reverse;

            display: flex;

            flex-direction: row-reverse;

        }

        #box1 {

            width: 50px;

            height: 50px;

        }

    </style>

</head>

<body>

<h4>This is a Column-Reverse</h4>

<div id="content">

    <div id="box" style="background-color:red;">A</div>

    <div id="box" style="background-color:lightblue;">B</div>

    <div id="box" style="background-color:yellow;">C</div>

    <div id="box" style="background-color:green;">d</div>

</div>

<h4>This is a Row-Reverse</h4>

<div id="content1">

    <div id="box1" style="background-color:red;">A</div>

    <div id="box1" style="background-color:lightblue;">B</div>

    <div id="box1" style="background-color:yellow;">C</div>

    <div id="box" style="background-color:green;">d</div>

</div>

</body>

</html>

　　3.2 flex-warp:

　　默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

　　

　　3.3 flex-flow:

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

　　3.4 justify-content:

　　justify-content属性定义了项目在主轴上的对齐方式。(高度一致，width不同的对其)

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

　　3.5 align-items:

　　　align-items属性定义项目在交叉轴上如何对齐。（width一致，高度不一致的对其）

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

　　3.6 align-content

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

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

总结：felx的6个容器属性可以记忆成：一方向，一换行，一简写，三对其。

参考网址：

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow

http://www.cnblogs.com/diligenceday/p/5985903.html

flex容器属性(一)的更多相关文章

  1. 微信小程序flex容器属性详解

    flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justif ...

  2. CSS3 Flex布局整理(二)-容器属性

    一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...

  3. flex布局中父容器属性部分演示效果

    如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...

  4. CSS3 flexbox 布局 ---- flex 容器属性介绍

    flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...

  5. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  6. 弹性布局（display:flex;）属性详解

    Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式.它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来. ...

  7. [CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

    最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前 ...

  8. flex布局属性说明

    flex布局又称为盒子布局或弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局. 给父容器添加display: flex/inline-flex;属性,即可使容器内容采 ...

  9. FusionCharts for Flex的属性和事件

    FusionCharts for Flex的属性和事件 1.Properties(属性) (1)FCChartType (2)FCDataURL (3)FCDataXML (4)FCDebugMode ...

随机推荐

  1. irc操作小记

    IRC客户端 HexChat 跨平台支持,目前正在Windows上使用,暂无不满意的地方 polari 支持的命令太少了,功能有限. Empathy 重量级,支持各种消息协议 weechat/irss ...

  2. ACM/ICPC 之 DFS范例(ZOJ2412-ZOJ1008)

    通过几道例题简单阐述一下DFS的相关题型 ZOJ2412-Farm Irrigation 直观的DFS题型,稍加变化,记录好四个方向上的通路就能够做出来 题目和接水管类似,问最少要灌溉几次,即求解最少 ...

  3. Pooled Allocation(池式分配)实例——Keil 内存管理

    引言:说到动态申请(Dynamic Allocation)内存的好处,学过C/C++的人可能都有体会.运行时的灵活申请自然要比编码时的猜测好的多.而在内存受限情况下这种灵活性又有特别的好处--能让我们 ...

  4. codeforces 515B. Drazil and His Happy Friends 解题报告

    题目链接:http://codeforces.com/problemset/problem/515/B 题目意思:有 n 个 boy 和 m 个 girl,有 b 个 boy 和 g 个 girl ( ...

  5. hdu 1972.Printer Queue 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1972 题目意思:需要模拟打印机打印.打印机里面有一些 job,每个job被赋予1-9的其中一个值,越大 ...

  6. code vs 1506 传话

    codevs 1506 传话(时间限制: 1 s 空间限制: 128000 KB) 题目描述 Description 一个朋友网络,如果a认识b,那么如果a第一次收到某个消息,那么会把这个消息传给b, ...

  7. 批处理命令——goto 和 :

    谈起goto,相信大家应该想到的是面向过程编程.其实,这就相当于当有人向你谈起class,意味着你就懂得面向对象编程.如果你不懂,那么你们的沟通将会很困难.不懂我说的啥意思吗?请参见曾经分享王路的一篇 ...

  8. 【leetcode】Palindrome Partitioning II(hard) ☆

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  9. 【XLL 框架库函数】 debugPrintf

    通过调用 Windows SDK 函数 OutputDebugStringA 在激活的调试器中输出字符串信息.如果应用程序没有调试器,那么系统调试器就会显示字符串.如果这两种调试器都没使用的话,deb ...

  10. The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.

    出现这样的错误: error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your C ...