我是一个70后的东北的程序员，当年用vf、vb、Delphi编程,界面是抠图小妹做方案，我们用编程语言来实现，更多的是研磨数据库与功能。后来转行做管理，离开编程行业多年 。
近来有点时间，对网页前端来了兴趣。学习之后感觉这个乱呀，HTML、css、js都能干一件事情，但谁都干不好。就好像饭桌上又有筷子，又有刀叉，有时还得用手抓一样。
网上各种教材满天飞，要么是个文科生絮絮叨叨地说一顿没个重点，要么是翻译的原文驴唇不对马嘴。
现在把我学习前端的心得，用形象的比喻给大家叙述一遍，帮助真正的程序员快速理解和上手前端界面。把那些“前端工程师”打回“抠图小妹”的原形。
Flex弹性布局,不一样的学习心得
择风顺水
我是一个70后的东北的程序员，当年用vf、vb、Delphi编程,界面是抠图小妹做方案，我们用编程语言来实现，更多的是研磨数据库与功能。后来转行做管理，离开编程行业多年 。
近来有点时间，对网页前端来了兴趣。学习之后感觉这个乱呀，HTML、css、js都能干一件事情，但谁都干不好。就好像饭桌上又有筷子，又有刀叉，有时还得用手抓一样。
网上各种教材满天飞，要么是个文科生絮絮叨叨地说一顿没个重点，要么是翻译的原文驴唇不对马嘴。
现在把我学习前端的心得，用形象的比喻给大家叙述一遍，帮助真正的程序员快速理解和上手前端界面。把那些“前端工程师”打回“抠图小妹”的原形。
Flex-弹性布局
1、flex容器定义
定义这个盒子为弹性布局，以后这里的项目都排版都归她管。
.box {
display: flex;
}
这就是Flex弹性盒子,也可以理解成容器、托盘等，多形象！签子是主轴，筷子是交叉轴。
2、容器属性
2.1主轴方向
flex-direction: row; 从左向右排列
拿签子吃的第一块肉的方向，主轴的头部，筷子尖就是交叉轴的头部
flex-direction: row-reverse; 从右向左排列
flex-direction: column; 从上向下排列
flex-direction:column-reverse; 从下向上排列
2.2主轴多行
flex-wrap: nowrap; (缺省)：单行排列
flex-wrap: wrap; 多行排列
flex-wrap: wrap-reverse; 多行排列，按从下到上的顺序
flex-flow: row nowrap; 是flex-direction属性和flex-wrap属性的简写
2.3主轴上对齐顺序
justify-content: flex-start; 从头对齐
justify-content: flex-end; 从尾对齐
justify-content: center; 居中对齐
justify-content: space-between; 均匀对齐（贴边）
justify-content: fspace-around; 等距对齐（双臂距离）
justify-content: space-evenly; 等距对齐列（单臂距离）
2.4交叉轴对齐顺序
align-items: stretch; (缺省)：交叉轴拉伸
align-items: flex-start; 交叉轴从头对齐
align-items: flex-end; 交叉轴从尾对齐
align-items: center; 交叉轴居中对齐
align-items: baseline; 交叉轴文字基线对齐
2.5align-content 交叉轴的对齐方式
align-content: stretch; (缺省)：拉伸显示
align-content: flex-start; 从头对齐
align-content: flex-end; 从尾对齐
align-content: center; 居中对齐
align-content: space-between; 均匀对齐（贴边）
align-content: space-around ; 等距对齐（双臂距离）
3、项目属性
3.1 order: 6; 设置项目的名次，缺省0
3.2 align-self: auto|flex-start|flex-end|center|baseline|stretch; 单独设置项目的对齐方式，默认为auto，继承父元素的align-items属性，如果没有父元素，则等同于stretch。
设置中间这块大肉筋，单独排队
设置中间这块大肉筋，单独排队
3.3 flex-grow:1; 放大比例。flex-grow:1填充整个Flex容器。缺省为0即不放大
中间这块大肉筋占据剩余的所有空间3.4 flex-shrink:0; 缩小倍数，缺省为1
中间这块大肉筋缩小了
3.5 flex-basis:20%; 原来尺寸。被放进一个flex容器之前的大小。 缺省 auto
（这个功能，在网上的教程，都是唠唠叨叨地，没有一个能看懂，直接拷贝上来，以后慢慢悟吧）
简写：
Flex属性是flex-grow, flex-shrink 和 flex-basis
默认值 flex 0 1 auto; 默认值即在有剩余空间时，只放大不缩小
（2）flex: none|flex:0 0 auto; 即有剩余空间时，不放大也不缩小，最终尺寸通常表现为最大内容宽度。
（3）flex: 0|flex:0 1 0%; 即当有剩余空间时，项目宽度为其内容的宽度，最终尺寸表现为最小内容宽度。
（4）flex: auto|flex:1 1 auto; 即元素尺寸可以弹性增大，也可以弹性变小，具有弹性，尺寸不足会优先最大化内容。
（5）flex: 1|flex:1 1 0%; 即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，尺寸不足会优先最小化内容。
