一，概念

　　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. c++ 文件utf-8格式

    #include <stdio.h> int i = 0; while (i < 20) {    i++;    WriteLog("d:\\log.txt", ...

  2. WPF三大模板简介

    WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了控件“长成什么样子”,因 ...

  3. a byte of python(摘02)

    a byte of python 第四章 运算符与表达式 运算符 运算符优先级 (运算符通常由左向右结合,即具有相同优先级的运算符按照从左向右的顺序计算.例如, 2 + 3 + 4 被计算成 (2 + ...

  4. 头文件algorithm中的常用函数

    非修改性序列操作(12个) 循环         对序列中的每个元素执行某操作         for_each() 查找         在序列中找出某个值的第一次出现的位置         fin ...

  5. Enum:EXTENDED LIGHTS OUT(POJ 1222)

    亮灯 题目大意:有一个5*6的灯组,按一盏灯会让其他上下左右4栈和他自己灯变为原来相反的状态,要怎么按才会把所有的灯都按灭? 3279翻版题目,不多说,另外这一题还可以用其他方法,比如DFS,BFS, ...

  6. IOS-触摸事件

    UITouch UITouch类中包含五个属性 •window:触摸产生时所处的窗口.由于窗口可能发生变化,当前所在的窗口不一定是最开始的窗口 •view:触摸产生时所处的视图.由于视图可能发生变化, ...

  7. yii抛出错误页面CHttpException

    public void __construct(integer $status, string $message=NULL, integer $code=0) $status integer HTTP ...

  8. Spring自动装配与扫描注解

    1 javabean的自动装配 自动注入,减少xml文件的配置信息. <?xml version="1.0" encoding="UTF-8"?> ...

  9. 获取driver网络路径名称

    'get the web path of the drive s: Dim MM As New Management.ManagementObject(String.Format("win3 ...

  10. swift学习记录之代理

    /// 访客视图的协议 protocol VisitorLoginViewDelegate: NSObjectProtocol { func visitorLoginViewWillRegister( ...