聊聊flexbox

时间 2019-11-08

标签聊聊 flexbox 栏目 Flex 繁體版

原文原文链接

和一步聊聊布局神器flexbox 视频讲解有偿的哦

本文涉及内容以下： flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器，但属性实在太多让人无从下手，所以将本身所学的知识作个总结。css

基本概念

flexbox是Flexible Box的缩写，译为弹性布局。flex 布局主要是让容器中的子项目能够根据配置改变自身的宽高及顺序，以最佳的方式填充容器，达到弹性的目的。容器有横轴和纵轴来划分容器，横轴默认为水平方向纵轴为垂直方向。
html

容器属性

容器属性用来控制布局的大方向。git

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

flex-direction属性决定主轴方向（即项目的排列方向）。 row | row-reverse | column | column-reverse
code demo previewgithub

flex-wrap

该属性用来控制，当容器的主轴方向放不下全部项目时该如何处理。wrap | wrap-reverse | no-wrap, no-wrap 为默认值。
code demo preview编程

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写，你要是记不住也没必要强求。默认值为row nowrap。小程序

justify-content

justify-content定义子项目在主轴上的对齐方式。能够联想下 text-align。flex-start | flex-end | center | space-between | space-around
须要注意的是：space-around的两边的边距要比中间的边距要小一些。
code demo previewsegmentfault

align-items

justify-content定义子项目在纵轴上的对齐方式。 flex-start | flex-end | center | baseline | stretch
code demo preview浏览器

align-content

align-content属性定义了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。

以上就是flex 布局所涉及的因此容器属性。下一小结，咱们将共同窗习项目相关属性。布局

项目属性

项目属性用来控制容器中的项目自身的位置和伸缩。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

order 用来控制 flex 项目自身的摆放顺序，默认值为0，能够为负数，值越小项目越靠前摆放。
code demo preview

flex-grow

flex-grow控制项目的放大比例，默认为0，不放大。值得注意的是放大的比例是相对于剩余的空间而言，而不是项目本身的大小。
code demo preview

flex-shrink

flex-shrink 与 flex-grow 相似，主要用来控制项目的缩小比例，默认值为1，同比缩小。
code demo preview
flex-grow 和 flex-shrink 都是按照剩余空间进行放大缩小的，而不是自身。你们记住瘦死的骆驼比马大。

flex-basis

flex-basis 很好理解，若横轴是主轴，flex-basis 能够当作 width 来使用；若纵轴是主轴，flex-basis 能够当作 height 来使用。我的感受 flex-basis width 和 height 更灵活。

flex

flex 属性是 flex-grow flex-shrink flex-basis 三个属性的缩写。一样的原则，为了避免增长你们的学习难度，不会没必要强求。今天只向你们解释一下 flex: 1;当 flex的值为整数是它表明 flex-grow: 数值； flex-shrink采用默认值1；flex-basis:为0%。

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

那么你们思考一下flex: 2;等同于什么？

.item {flex: 2;}
.item {
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0%;
}

align-self

以上项目的属性和练习也完成了，接下来使用 flex 布局实现咱们平常工做中常见的三个需求。

实战

实现等宽布局，即便项目被删除和添加也不须要更改 css 的代码，经常使用来实现导航code demo preview
垂直水平居中，该需求是特别常见的使用 flex 特别容易。code demo preview
等高布局，当左右两个框的高度不定时，咱们能够考虑使用 flex 实现。code demo preview

FLEXBOX FROGGY游戏检验一下本身对 flexbox 的理解
欢迎你们指正批评、或留言。QQ群：538631558

【开发环境推荐】 Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，而且支持自定义域名指向，动态计算资源调整，能够完成各类应用的开发编译与部署。