一，概念

　　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. ios 跟踪UITextField更改的简单方法

    如图,用xib链接,用到的消息是Editing Changed 消息.

  2. Delphi Excel 操作大全

    Delphi Excel 操作大全 (一) 使用动态创建的方法首先创建 Excel 对象,使用ComObj:var ExcelApp: Variant;ExcelApp := CreateOleObj ...

  3. C#在类中用调用Form的方法

    class 你的类 { private Form1 frm; //构造函数 public 你的类( Form1 form) { frm = form; } //调用form方法 private voi ...

  4. 关于C语言中的转义字符

    1.转义字符的分类 1. 1一般转义字符 这种转义字符,虽然在形式上由两个字符组成,但只代表一个字符.常用的一般转义字符为: \a     \n     \t     \v     \b     \r ...

  5. cmd导入oracle数据

    ctrl+r 输入imp

  6. IE的if条件Hack（兼容性）

    1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉 2. 〈!--[if IE]〉 所有的IE可识别〈![endif]--〉 3. 〈!--[if IE 5 ...

  7. JSP题库

    一.    填空题 一个完整的JSP页面是由普通的HTML标记.JSP指令标记.JSP动作标记.  变量声明 与方法声明  .程序片  .表达式  .   注释   7种要素构成. JSP页面的基本构 ...

  8. 解决jetty7.0.pre5启动时报ClassNotFoundException: javax.interceptor.InvocationContext异常的问题

    一.背景介绍:最近项目在使用maven命令行运行jetty服务器时出现ClassNotFoundException: javax.interceptor.InvocationContext异常 二.环 ...

  9. iOS键盘监听的通知

    #pragma mark - 键盘通知回调方法 //  监听键盘的通知 [[NSNotificationCenter defaultCenter] addObserver:self selector: ...

  10. ios block中引用self

    __block __weak typeof(self) tmpSelf = self; ^(){ tmpSelf...... }