在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. sharepoint 2010 FieldLookup 的更新方法

    网上有,但是是错误的,稍微改一下,就可以了 第一个方法是要更新的item,其中 _fieldname 为要更新的lookup字段名字,_lookupValue为要更新的值. public void S ...

  2. Python用户交互与流程控制

    1. 用户交互 python3通过input实现用户交互,与python2的raw_input一样,接收的值都转换成字符串格式.python2中也有一个input,而python2中的input接收的 ...

  3. Linux下安装部署RabbitMQ

    在写正文之前先啰嗦几句,RabbitMQ(消息队列)的安装让我费了半天劲啊!足足折腾了2天,最后写下这篇文章总结下,其实很简单,但是你找不到错在哪个环节就会费很多无用功,如果你也遇到了安装erl后 怎 ...

  4. 我的visual studio 配色方案 Rubik c++版

    只是更改了c++的配色,放出来与大家分享,因为大胆地采用了各种颜色,所以我把它取名叫做Rubik,因为Rubik‘s cube也就是魔方,我本人是非常喜欢魔方的,然后也符合颜色丰富多彩的这个特征,希望 ...

  5. nbu备份虚拟机报错156状态4207

    VMware Backup getting snapshot error encountered (156)and status: 4207: Could not fetch snapshot met ...

  6. G711格式语音采集/编码/转码/解码/播放

    2019-05-01 语音g711格式和AMR格式类似,应用很简单,很多人已经整理过了,收录于此,以备不时之需,用别人现成的足矣,我们的时间应该用来干更有意义的事. 1.PCM to G711 Fas ...

  7. Spring Java配置

    Java配置 Java配置是Spring 4.x推荐的配置方式,可以完全替代xml配置:Java配置也是Sping Boot 推荐的配置方式.Java配置是通过@Configuration和@Bean ...

  8. maven没有servlet(创建servlet后报错)

    maven不能创建servlet 解决方案 方案一 在项目的iml进行指定根目录 <sourceRoots> <root url="file://$MODULE_DIR$/ ...

  9. putty乱码问题

    1.将linux系统编码设置为utf-8 #vi /etc/sysconfig/i18n #设置为如下内容: LANG="en_US.UTF-8" SYSFONT="la ...

  10. currency 过滤器

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...