终极Flexbox属性查询列表

本文由大漠根据Sfioritto的《THE ULTIMATE FLEXBOX CHEAT SHEET》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sketchingwithcss.com/samplechapter/cheatsheet.html，以及作者相关信息

——作者：Sfioritto

——译者：大漠

Flexbox是CSS3新增加的，优秀的和令人惊奇的新特性，并在各浏览器得到良好的支持。让你从此告诉了浮动带来的挫折感和让你实现垂直水平居中更佳简单完美。让你的布局可以根据浏览器自动伸缩。

快速查阅基本概念的介绍。可以先看看视频教程（需要台式机/笔记本和一个浏览器）。

如果您从未接触过Flexbox模块相关的知识，您可以先点击这里查阅相关的中文教程——大漠

注意：如果下面的示例中没有任何效果，您需要先升级您的浏览器。

创建一个flex容器

任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
}

Flex项目行显示

Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

/*On the flex container*/
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

Flex项目列显示

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
}

Flex项目移动到顶部

如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。

.flexcontainer {
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}   

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

Flex项目移到左边

flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column; 
   flex-direction: column;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

Flex项目移动右边

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
}

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: flex-end;
   align-items: flex-end;
}

水平垂直居中

在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

Flex项目实现自动伸缩

您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。

.bigitem {
   -webkit-flex: 2 0 0; 
   flex: 2 0 0; 
}
.smallitem {
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}

Flex项目多行显示

Flex项目多行显示目前支持的浏览器仅限于webkit浏览器和IE11浏览器。Firefox浏览器不支持多行显示。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   -webkit-align-content: flex-end;
   align-content: flex-end;
}

Flex项目多列显示

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: stretch;
   align-content: stretch;
}

移出多行或多列之间的间距

align-content属性用来分配多行或多列之间的空间。其属性值包括：flex-start、flex-end、space-between、space-around和stretch。简单地移出多列之间的宽间，可以将align-content设置为center。

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: center;
   align-content: center;
}

Flex容器每侧放置一个元素

你可以控制align-items值和align-self设置单个元素。你可以使用margin将单个元素向下或向下或向左向右。例如，在列布局你可以给flex项目设置margin-right:auto，将flex项目移到flex容器的左侧。

.left {
   -webkit-align-self: flex-start;
   align-self: flex-start;
}

.right {
   margin-left: auto;
}

扩展阅读

Flexbox模块相关的参数表格。注:以下表格数据来自于David Storey的《Designing CSS Layouts With Flexbox Is As Easy As Pie》一文。中文版本可以点击这里。

规范版本

开启flexbox：让一个元素变成伸缩容器

主轴对齐方式：指定伸缩项目沿主轴对齐方式

侧轴对齐方式：指定伸缩项目沿侧轴对齐方式

单个伸缩项目侧轴对齐方式

伸缩项目行对齐方式：指定伸缩项目行在侧轴的对齐方式

显示顺序：指定伸缩项目的顺序

伸缩性：指定伸缩项目如何伸缩尺寸

伸缩流：指定伸缩容器主轴的伸缩流方向

换行：指定伸缩项目是否沿着侧轴排列

资源链接

• Flexbox中文教程
• The latest spec
• CSS-Tricks guide to flexbox
• Mozilla guide to flexbox
• Smashing Magazine tutorial

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

中文译文：https://www.fedev.cn/css3/css3-flexbox-cheat-sheet.html

Nike Air Penny 3