终极Flexbox属性查询列表

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

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

——作者:

——译者:大漠

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;
}

终极Flexbox属性查询列表

Flex项目列显示

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

终极Flexbox属性查询列表

Flex项目移动到顶部

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

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

终极Flexbox属性查询列表

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

终极Flexbox属性查询列表

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;
}

终极Flexbox属性查询列表

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

终极Flexbox属性查询列表

Flex项目移动右边

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

终极Flexbox属性查询列表

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

终极Flexbox属性查询列表

水平垂直居中

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

.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;
}

终极Flexbox属性查询列表

.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;
}

终极Flexbox属性查询列表

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;
}

终极Flexbox属性查询列表

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;
}

终极Flexbox属性查询列表

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;
}

终极Flexbox属性查询列表

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

align-content属性用来分配多行或多列之间的空间。其属性值包括:flex-startflex-endspace-betweenspace-aroundstretch。简单地移出多列之间的宽间,可以将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;
}

终极Flexbox属性查询列表

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属性查询列表

扩展阅读

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

规范版本

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

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

Flexbox制作CSS布局易如反掌

资源链接

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

如需转载烦请注明出处:

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

中文译文:http://www.w3cplus.com/css3/css3-flexbox-cheat-sheet.html

返回顶部