今天教你CSS-Flex布局

.faBox {
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
}

上面前四个属性分别对应以下四种情况

flex-direction 还有两个可能的取值，initial 和 inherit 根据英文意思可知。

initial 意为“最初的”，是 CSS 提供的关键字，很多地方都能使用，可以快速设置某个属性的默认值，方便快捷。

inherit 意为“继承”，可以从父元素中继承该属性。

2.2 flex-wrap 属性

根据中文意思来判断，这个东西应该是控制换行的。

.faBox{
flex-wrap: nowrap | wrap | wrap-reverse;
}

2.3 flex-flow 属性

该属性是 flex-wrap 和 flex-direction 的简写方式。

.faBox{
flex-flow: || ;
}

2.4 justify-content 属性

该属性负责主轴的对齐方式。

.faBox{
justify-content: flex-start | flex-end | center | space-between | space-around;
}

2.4 align-items 属性

该属性负责交叉轴的对齐方式（垂直居中靠它来实现，很容易，面试常考题）。

![](https://upload-images.jianshu.io/uplo

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

ad_images/23129380-d3c74f25306c3067.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.5 align-content 属性

设置多根主轴时候的对齐方式，如果只有一条轴线，不起作用。

.faBox{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

3.项目属性

3.1 order 属性

order 英文意思秩序，该属性可以设置项目的排列顺序，从小到大。

.sonBox1{
order: ;
}

3.2 flex-grow 属性

定义项目的放大比例，默认 0 ，不参与放大。

.sonBox1{
flex-grow: ; /* default 0 */
}

3.3 flex-shrink 属性

定义项目缩放。

.sonBox1{
flex-shrink: ; /* default 1 */
}

3.4 flex-basis 属性

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题