0. 目录

• 目录
• 引言
• 正文
  • 1 引入
  • 2 基础
  • 3 使用
  • 4 弹性容器Flex container属性
    • 41 flex-direction
    • 42 flex-wrap
    • 43 flex-flow
    • 44 justify-content
    • 45 align-items
    • 46 align-content
    • 47 注意事项
  • 5 弹性子元素Flex item属性
    • 51 order
    • 52 flex-grow
    • 53 flex-shrink
    • 54 flex-basis
    • 55 flex
    • 56 align-self
    • 57 注意
  • 6 Flexbox实验场
• 声明

1. 引言

原文：scotch.io的A Visual Guide to CSS3 Flexbox Properties 在上图所示的盒子里，你可以看到用来描述flex container和flex items的属性和术语，如果你想了解详细信息，请访问W3C的flexbox model官方文档.

flexbox自2009的初次草案开始，已经经历了几次更新和语法修改，为了避免困惑、保证清晰，我们仅仅使用2014年9月最后一次工作草案中的语法。如果您想要实现旧浏览器的兼容，请访问这篇文章寻找最佳实践。

最近的flexbox规范浏览器支持情况如下：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

您也可以到caniuse了解浏览器兼容情况详情。

本文中的用到的一些术语的表达约定如下

1. flex-container-弹性容器
2. flex-item-弹性子元素
3. main axis-主轴
4. cross axis-侧轴

2.3 使用

使用flexbox只需要在父元素上设置display属性即可。

.flex-container { display: -webkit-flex; /* Safari */ display: flex;}

• 1
• 2
• 3
• 4

如果您想让它以内联方式显示，则

.flex-container { display: -webkit-inline-flex; /* Safari */ display: inline-flex;}

• 1
• 2
• 3
• 4

注意：仅仅需要在父元素上设置这一个属性即可，它的子元素会自动变成flex items。

有很多方式分组flexbox的所有属性，我发现最容易理解的方式是分成两组，一组为弹性容器的属性，另一组为弹性子元素的属性，接下来我们按这种方式来一一解析。

2.4 弹性容器（Flex container）属性

2.4.1 flex-direction

该属性通过设置flex container主坐标轴方向影响子元素(flex item)如何在容器中排布。我们可以设置两个主要的方向水平和垂直方向。

可以接受的值有四个row、row-reverse、column、column-reverse，如下所示。

.flex-container { -webkit-flex-direction: row; /* Safari */ flex-direction:     row;}

• 1
• 2
• 3
• 4

弹性子元素将会按照自左向右的水平排列。 第二个元素可以相对比较大，如下图所示。 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：CSS3 Flexbox可视化指南

关键词：CSS