一，概念

　　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. Semaphore（信号量）

    Semaphore msdn介绍: 限制可同时访问某一资源或资源池的线程数. 命名空间: System.Threading 程序集: System(在 System.dll 中) 通俗理解: 1:宾馆 ...

  2. Python缩小图像

    LyncLynn用途: 缩小图像 # -*- coding: UTF-8 -*- #Version: V1.0 #Author:lynclynn #CreateDate:20151201 #Updat ...

  3. myeclipse破解

    由于内容比较多,我就直接转载了 ,同时感谢原博主 http://blog.itpub.net/27042095/viewspace-1164998/

  4. Jquery选中行实现行中的Checkbox的选中与取消选中

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  5. 构建新版本APP上传流程

    //既然是构建新版本的 APP,那么所有的证书都是已经存在了的,因此以下不再重复描述证书申请过程,如有需要请自行 Google 相关流程. 1)更改版本号: 2)去掉工程内的全局断点,同时关闭僵尸调试 ...

  6. Java实现文件复制的四种方式

    背景:有很多的Java初学者对于文件复制的操作总是搞不懂,下面我将用4中方式实现指定文件的复制. 实现方式一:使用FileInputStream/FileOutputStream字节流进行文件的复制操 ...

  7. balabalabala

    [微分享]:种子不落在肥土而落在瓦砾中,有生命力的种子决不会悲观和叹气,因为有了阻力才有磨炼.

  8. iOS应用架构谈（三）：View层的组织和调用方案（下）

    iOS客户端应用架构看似简单,但实际上要考虑的事情不少.本文作者将以系列文章的形式来回答iOS应用架构中的种种问题,本文是其中的第二篇,主要讲View层的组织和调用方案.下篇主要讨论做View层架构的 ...

  9. CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

    目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...

  10. python基础——定制类

    python基础——定制类 看到类似__slots__这种形如__xxx__的变量或者函数名就要注意,这些在Python中是有特殊用途的. __slots__我们已经知道怎么用了,__len__()方 ...