在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒

引入

Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布局模块,用于实现容器里项目的对齐、方向、排序(即使在项目大小位置、动态生成的情况)。flex容器最大的特性在于,能够修改子元素的宽度和高度,以满足在不同尺寸屏幕下的如意分布。

许多设计人员、开发人员发现flexbox布局方式使用简单,定位元素更加简单、复杂的布局更容易用较少的代码实现,大大地简化了开发流程。不像块状布局、内联布局那样基于竖直方向、水平方向,flexbox的布局算法基于方向。flexbox布局适用于小的应用组件、新的CSS Grid布局模块更适用于大量的布局。

本指南不解释flex属性如何工作,我们只是用可视化的方式展示flex属性如何影响布局。

基础

在具体描述flex属性之前,我们先来简要介绍下flexbox模型。flex布局由父容器(我们叫做flex container)和它的子元素(我们叫做flex items)组成。

在上图所示的盒子里,你可以看到用来描述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-侧轴

使用

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

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

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

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

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

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

弹性容器(Flex container)属性

flex-direction

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

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

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

弹性子元素将会按照自左向右的水平排列。

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

弹性子元素将会自右向左水平排列。

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

弹性子元素将自上而下竖直排列

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

弹性子元素将自下而上竖直排列

默认值为row.
注意,row和row-reverse是基于书写顺序的,所以在rtl环境下将会反置。

flex-wrap

flexbox最初的理念是保持弹性容器的子元素在一行中。flex-wrap属性控制当子元素items超出弹性容器范围是是否换行,以及新行的方向。

本属性可以接受一下几个值:no-wrap、wrap、wrap-reverse,分别如下所示。

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

弹性子元素将会在一行显示,默认的子元素items将会缩减以适应弹性容器的宽度。

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

如果需要的话,弹性子元素将会自左向右、自上而下多行显示

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

如果需要的话,弹性子元素将会自左向右、自下而上多行显示

默认值为no-wrap.
注意,这些属性也是基于书写顺序的,所以在rtl环境下将会反置。

flex-flow

flex-flow属性是flex-directionflex-wrap属性的快捷方式,复合属性。

.flex-container {
-webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
flex-flow: <flex-direction> || <flex-wrap>;
}

默认值为row nowrap.

justify-content

justify-content设置弹性子元素在弹性容器中当前行主坐标的对齐方式,当弹性容器里一行上的所有子元素都不能伸缩或已经达到其最大值时,该属性可协助对多余的空间进行分配。

可以接受的值为flex-start、flex-end、center、space-between、space-around等五个值,默认值为flex-start。详细如下所示。

.flex-container {
-webkit-justify-content: flex-start; /* Safari */
justify-content: flex-start;
}

ltr环境下,弹性子元素flex items将会弹性容器中左对齐

.flex-container {
-webkit-justify-content: flex-end; /* Safari */
justify-content: flex-end;
}

ltr环境下,弹性子元素flex items将会弹性容器中右对齐

.flex-container {
-webkit-justify-content: center; /* Safari */
justify-content: center;
}

弹性子元素flex items将会弹性容器中居中对齐

.flex-container {
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
}

弹性子元素flex items中的第一个、最后一个对齐弹性容器的边缘,其余均匀分布

.flex-container {
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
}

弹性子元素flex items中的任何一个都参与均匀分布,即使是第一个和最后一个。

align-items

align-items设置弹性子元素在弹性容器中当前行侧轴上的对齐方式,跟justify-content类似但是作用于侧轴(flex-direction为row和row-reverse时为纵轴,flex为column和column-reverse时为横轴)。该属性设置所有flex items(包含匿名的item)的默认对齐方式。

可以接受的值为flex-start、flex-end、center、baseline、stretch等五个值,默认值为stretch。详细如下所示。

.flex-container {
-webkit-align-items: stretch; /* Safari */
align-items: stretch;
}

弹性子元素将会从侧轴开始到侧轴结束铺满整个高度(宽度)。

.flex-container {
-webkit-align-items: flex-start; /* Safari */
align-items: flex-start;
}

弹性子元素将会堆栈在弹性容器的侧轴开始位置。

.flex-container {
-webkit-align-items: flex-end; /* Safari */
align-items: flex-end;
}

弹性子元素将会堆栈在弹性容器的侧轴结束位置。

.flex-container {
-webkit-align-items: center; /* Safari */
align-items: center;
}

弹性子元素将会堆栈在弹性容器的侧轴中间位置。

.flex-container {
-webkit-align-items: baseline; /* Safari */
align-items: baseline;
}

弹性子元素将会以文字基线的方式对齐。

注意,通过这里了解基线计算的更多细节。

align-content

当弹性容器侧轴中有空白时,align-content属性设置伸缩行的对齐方式,正如justify-content在主轴上设置对齐方式一样。

可以接受的值为:stretch、flex-start、flex-end、center、space-between、space-around等, 默认值为stretch。

.flex-container {
-webkit-align-content: stretch; /* Safari */
align-content: stretch;
}

各行平分剩余空间。

.flex-container {
-webkit-align-content: flex-start; /* Safari */
align-content: flex-start;
}

各行堆栈紧靠侧轴起始边界。

.flex-container {
-webkit-align-content: flex-end; /* Safari */
align-content: flex-end;
}

各行堆栈紧靠侧轴结束边界。

.flex-container {
-webkit-align-content: center; /* Safari */
align-content: center;
}

各行堆栈位于侧轴居中位置。

.flex-container {
-webkit-align-content: space-between; /* Safari */
align-content: space-between;
}

各行之间空白均匀分布,第一行和最后一行紧靠侧轴边缘。

.flex-container {
-webkit-align-content: space-around; /* Safari */
align-content: space-around;
}

各行在弹性盒子中均匀分布,两端保留子元素与子元素之间间距大小的一半。

注意

  • 该属性只作用于弹性容器里拥有多行的情况,如果只有单行该属性无效。另外。
  • 上面所说的“行”指的是主轴方向的平行的数据,例如flex-direction值为row、row-reverse时指数据行,值为column、column-reverse时指数据列。

注意事项

  • 所有的column-属性对弹性容器无效
  • ::first-line::first-letter伪对象对弹性容器无效

弹性子元素(Flex item)属性

order

order属性控制弹性容器里子元素的顺序,默认情况下按照弹性容器里添加的顺序排列。

可以接受的值为整型数字,默认值为0.

.flex-item {
-webkit-order: <integer>; /* Safari */
order: <integer>;
}

弹性子元素将按照给定的数字进行排列,如下图所示。

flex-grow

该属性设置弹性子元素的扩展比率(flex-grow),该值决定某个子元素相对于其他普通子元素的扩展大小。

可接受值为数字,默认值为0,负数无效。

.flex-item {
-webkit-flex-grow: <number>; /* Safari */
flex-grow: <number>;
}

如果所有的弹性子元素具有相等的flex-grow值,那么所有的子元素将具有相同的大小。

第二个元素可以相对比较大,如下图所示。

flex-shrink

该属性设置弹性子元素的收缩比率(flex-shrink),该值决定某个子元素相对于其他普通子元素的收缩大小。

.flex-item {
-webkit-flex-shrink: <number>; /* Safari */
flex-shrink: <number>;
}

默认情况下所有子元素都可以被收缩,如果设置为0,则不收缩。

flex-basis

该属性指定弹性子元素伸缩前的默认大小值,相当于width和height属性。

.flex-item {
-webkit-flex-basis: auto | <width>; /* Safari */
flex-basis: auto | <width>;
}

可接受值为数字、百分比和auto,默认值为auto(
无特定宽度值,取决于其它属性)。

如下图所示,我们设置第四个子元素的宽度值。

注意未来可能将会引入新的关键字

flex

该属性为flex-grow, flex-shrinkflex-basis属性的复合属性,一个简写的方式。

.flex-item {
-webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

默认值为:0 1 auto。

注意, W3C推荐使用复合属性的方式,因为复合属性的方式可以方便地重置没有指定具体值的属性以适应大部分的常规应用

align-self

align-self允许独立的弹性子元素覆盖弹性容器的默认对齐设置(align-items)。大家到align-items部分获取不同值得不同表现方式。

.flex-item {
-webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

默认值为auto。

第三个和第四个弹性子元素将使用align-self属性覆盖默认对齐方式。

Note: The value of auto for align-self computes to the value of
align-items on the element’s parent, or stretch if the element has no
parent.

注意,指定algin-self为auto时,将使用弹性容器的align-items属性或者如果没有父对象时使用stretch属性。

注意

  • floatclearvertical-align对flex item无效。

Flexbox实验场

原文的实验场angular地址被墙,我fork了下进行了修改,请大家在线研究,或者到github关注原项目

CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南的更多相关文章

  1. css3 居中(推荐弹性盒模型方式)

    参考  http://www.zhihu.com/question/20774514 http://caibaojian.com/demo/flexbox/align-items.html 例子:ht ...

  2. Flexbox(弹性盒模型)完全指南

    Flexbox(弹性盒模型)布局完全指南 Github:sueRimn 来源:A guide to Flexbox 这个指南讲诉了flexbox的所有内容,重点介绍了父元素(flex容器)和子元素(f ...

  3. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  4. CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

  5. css3弹性盒模型(Flexbox)

    Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当 ...

  6. 详解css3弹性盒模型(Flexbox)

    目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex ...

  7. CSS3弹性盒模型flexbox布局

    属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器.· box:将对象作为弹性伸缩盒显示. ...

  8. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  9. 请解释一下css3的flexbox(弹性盒布局模型),以及适用场景

    弹性盒模型是c3规范的新的布局方式,该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局.对齐和分配空间.在传统的布局中,block布局是把块级元素在垂直方向从上向下一次排列的,而inlin ...

随机推荐

  1. u-boot分析(七)----内存初始化

    u-boot分析(七) 上篇博文我们按照210的启动流程,分析到了时钟初始化,今天我们继续按照u-boot的启动流程对内存的初始化进行分析. 今天我们会用到的文档: 1.        2440芯片手 ...

  2. centos7按报错dracut

    在Windows下,将从CentOS官网上下载的CentOS7镜像文件,用UltrISO以硬盘镜像方法写入U盘 安装过程中出现下面错误: dracut-initqueue[624]:Warning: ...

  3. springboot/springmvc转换器

    常用的转换器 String转Date转换器(用于接受日期参数自动转换成Date类型便于后台数据处理) /** * 全局handler前日期统一处理 * @author zhanghang * @dat ...

  4. 数组模拟栈(C语言)

    用数组模拟栈的实现: #include <stdio.h> #include <stdlib.h> #define STACK_SIZE 100 typedef struct ...

  5. python3基础14(有关日期的使用2)

    #!/usr/bin/env python# -*- coding:utf-8 -*-import timeimport datetime,shutil,osimport calendar print ...

  6. GNU Nano编辑器

    ^表示 control建 ^X 退出 nano ^O 保存文件 ^R 插入其他文件内容至光标位置 ^W 查找字符串 ^Y 跳至前一屏 ^V 跳至后一屏 ^K 剪切光标所在行并保存到剪贴板,或剪切选中内 ...

  7. Bonita portal 源码编译(未完成)

    首先下载源代码 https://github.com/bonitasoft/bonita-portal-js 以下内容为Github 的安装教程包含我安装过程中遇到的问题.并加以修正 Bonita p ...

  8. POJ-2229 Sumsets---完全背包变形

    题目链接: https://vjudge.net/problem/POJ-2229 题目大意: 给定一个N,只允许使用2的幂次数,问有多少种不同的方案组成N. 思路: 处理出2的幂次方的所有的数字,当 ...

  9. 通过WEB网管登录

    6.1  通过WEB网管登录简介 S5100-SI/EI系列以太网交换机提供内置的WEB Server,用户可以通过WEB网管终端(PC)登录到交换机上,利用内置的WEB Server以WEB方式直观 ...

  10. wcf 的小介绍

    http://www.cnblogs.com/scottckt/archive/2010/10/15/1852136.html