FlexBox中Flex-basis的默认值到底是多少？

FlexBox布局模块，也叫弹性盒子布局，W3C候选推荐，旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。Flex布局的主要思想是使父容器能够调节子元素的宽度、高度和排列顺序，从而能够最好地填充可用空间。本课程详述了Flex的所有内容和常用实战案例。

一.FlexBox前端页面布局权威手册

https://css-tricks.com/snippets/css/a-guide-to-flexbox

二.FlexBox中Flex-basis的默认值测试

item{
    flex:0 1 auto;
}

经过大量测试，发现flex的默认值0 1 auto，因为写flex 0 1 auto和不写flex效果一致。

三.但在flex后面一旦有值时，则flex-basis的默认值会发生变化，经测试为如下:

item{
    flex:1;
    flex:1 1;
}

第一种flex 1时，flex-strink默认为1，flex-basis为0%，同时flex 1 1时，flex-basis也为0%，可在浏览器上f12查看一下默认值。

所以Flex的默认值在不同环境下会有以上两种默认情况，大家一定要小心！！！

四.想详细专业的学习FlexBox前端技术，可参考发下《FlexBox前端页面布局》课程，由云知梦创始人强哥亲录：

http://www.yzmedu.com/course/446

跟着强哥轻松搞定Flexbox，原来这么简单，赶快上船吧！！！