Flex布局学习笔记

公司准备重做官网，听到这个消息很开心，这是我锻炼的好机会，希望能够独自完成整个官网的前后端，所以有很多东西要补。首先就是官网页面的响应式布局，不想使用框架，希望能自己写，这就需要flex布局的知识，配合sass来实现。之后还要继续看node.js，目前计划用express搭建公司官网的后台，这样就能一个人独立完成整个网站了。这周搞定flex和sass进阶，之前看了部分sass，都只是简单的用法，还需要再深入了解一下。

本篇Flex学习笔记算是单纯的流水账，实际资料来源于阮一峰大大的博文：
Flex 布局教程：语法篇

Flex 布局教程：实例篇

感谢所有无私分享的先行者们。

Flex布局是什么？

Flex布局，即Flexible Box（弹性盒模型）的缩写，是CSS3提出的新的布局方式，可以简单，完整，响应式的实现各种页面布局。

可以为任何容器指定Flex布局：

//块元素
.box{display:flex;}
//行内元素
.inline{display:inline-flex;}
//Webkit内核的浏览器
.box{
    display:-webkit-flex; /* Safari */
    display:flex;
}

注意:设置为Flex布局后，子元素的float，clear和vertical-align属性将会失效

基本概念：

使用Flex布局的元素成为容器（flex container），其子元素自动成为容器中的项目（flex item）。

首先来看看弹性盒模型：

其中:

• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）;
• 主轴默认从左往右，左端点叫做main start，右端点叫做main end；
• 交叉轴默认从上往下，上端点叫做cross start,下端点叫做cross end；
• 项目默认沿主轴方向排列，单个项目占据的主轴空间叫main size，占据的交叉轴空间叫corss size；

容器的属性：

容器（flex container）有以下六个属性：

//定义主轴方向（即项目排列方向）：默认从左往右
//              从左往右 | 从右往左 | 从上往下 | 从下往上
flex-direction:  row(default) | row-reverse | column | column-reverse;
//定义若项目沿着主轴在一条轴线上排列不下，如何换行（wrap）：默认不换行
//              不换行 | 换行，第二行在下 | 换行，第二行在上 
flex-wrap: nowray(default) | wrap | wrap-reverse;
//该属性为上边两个属性的简写，默认值为： row nowrap;
flex-flow: row nowrap(default);
//定义项目在主轴方向上的对齐方式：
//              跟main start对齐|跟main end对齐|居中|两端对齐，项目间隔相等|每个项目两侧间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。
justify-content: flex-start(default) | flex-end | center | space-between | space-around;
//定义项目在交叉轴方向上的对齐方式：
//          跟cross start对齐|跟cross end对齐|居中|以项目第一行文字的基准线对齐|若项目未固定高度，则占满整个容器（默认）
align-itmes: flex-start | flex-end | center | baseline | stretch(default);
//定义多跟主轴轴线（当项目一根轴线排不下的时候）的对齐方式，如果一根则不起效
//          跟corss start对齐|跟cross end对齐|跟corss axis中点对齐|占满整个交叉轴（默认）|跟cross axis亮度那对齐，主轴轴线之间间隔平均分布| 每根主轴轴线两侧间隔相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
align-content: flex-start | flex-end | center | stretch | space-between | space-around

项目属性

项目（flex item）有以下六个属性：

//定义项目的排列顺序，数值越小越靠前，默认为0。
order: <integer>; /* default 0 */
//定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。
//若所有项目的改属性值都为1，则等分剩余空间（若存在）。当有一个项目的值为2，其他都是1，则他占据的剩余空间比其他项目多一倍。
flex-grow: <number>; /* default 0 */
//定义项目的缩小比例，默认为1，若空间不足则缩小。
//如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-shrink:<number>; /* default 1 */
//定义在分配多余空间前，项目占据的主轴空间。浏览器根据该属性计算主轴是否有多余空间，默认值auto，即项目本来的大小
//可以设置为跟width或height属性一样的值。则项目占据固定空间
flex-basis:
//flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
//该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。优先合并写
flex:
//align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖。
//align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
//该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
align-self:auto | flex-start | flex-end | center | baseline | stretch;

实例篇

在这里见到了几个新单位，注意，下边的视窗指的是浏览器内部的可视区域（真正显示网页的区域）
vw(view width)视窗宽度：视窗宽度总共是100vw；
vh(view height)视窗高度：视窗高度总共是100vh；

vmax(view max)：视窗宽高中较大的一个的值是 100vmax
vmin(view min)：视窗宽高中娇小的一个的值是 100vmin

比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。