目录
6、优化：将几种不同语法混在一起使用，使flexbox得到更多浏览器的支持
前面加-webkit-:webkit引擎支持私有属性
前面加-moz-：Mozilla Gecko引擎支持私有属性
1、多列布局：columns
设置列宽：column-width
column-width:length(长度值，不可为负值)
column-width:auto(根据浏览器自动计算来设置)
设置列数：column-count
column-count:integer(列数，大于0的整数)
column-count:auto(根据浏览器自动计算来设置)
设置间距：column-gap
column-gap:normal(根据浏览器默认设置进行解析，一般为1em)
column-gap:length(长度值，不为负值)
设置列边框样式：column-rule
column-rule:length(长度值，不为负)
column-rule:style(边框样式，例如style为dashed则样式为虚线)
column-rule:color
column-rule:transparent(透明显示)
派生属性(效果同上)：
column-rule-width:
column-rule-color:
column-rule-style:
设置跨列显示：column-span
column-span:none(只在本栏显示)
column-span:all（横跨所有列，让这个效果在所有列中都生效）
设置列高度：column-fill
column-span:auto(列高自适应)
column-span:balance（列高随最高的对齐）
示例：
2、弹性盒布局：box
box模型，定义一个盒子在其他盒子中的分布方式一级如何处理可用的空间。可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。使用弹性盒子可以定义盒子的排列顺序，也可以反转。
定义伸缩项目（盒子里漂浮的元素）后column属性在伸缩容器上没有效果，同时float\clear和vertical-align属性在伸缩项目上也没有效果。
伸缩容器中的每一个子元素都是伸缩项目，伸缩项目沿着伸缩容器内的一个伸缩行定位，通常每个容器只有一个伸缩行，方向默认为上下左右
启动弹性盒布局：display
dispaly:box(将对象作为弹性伸缩盒显示，伸缩盒为最老版本)
dispaly:inline-box(将对象作为内联块弹性伸缩盒显示，伸缩盒为最老版本)
dispaly:flexbox(将对象作为弹性伸缩盒显示，伸缩盒为过渡版本)
dispaly:inline-flexbox(将对象作为内联块弹性伸缩盒显示，伸缩盒为过渡版本)
dispaly:flex(将对象作为弹性伸缩盒显示，伸缩盒为最新版本)
dispaly:inline-flex(将对象作为内联块弹性伸缩盒显示，伸缩盒为最新版本)
flexbox伸缩盒
允许容器有能力让其子项目能够改变其宽度、高度、顺序等，以最佳方式填充可用空间，适应所有类型的显示设备和屏幕大小。最适合应用程序的组件和小规模的布局。
flexbox=伸缩容器+伸缩项目
启动：
display:flex(定义伸缩容器，块状显示)
display:inline-flex(定义伸缩容器，行内显示)
定义伸缩方向：flex-direction
flex-direction:row(默认值，在ltr中左到右，在rtl中右到左)
flex-direction:row-reverse(与row方向相反)
flex-direction:column(上到下)
flex-direction:column-reverse(下到上)
定义行数：flex-wrap
定义单行还是多行，侧轴决定新行对方方向，适用于父元素
flex-wrap：nowrap(默认值，单行，方向同默认)
flex-wrap：wrap(多行，方向同默认)
flex-wrap：wrap-reverse(多行，方向同默认相反)
主轴（横向）对齐：justify-countent
定义伸缩项目主轴线的对齐方式，当所有项目都不能伸缩或伸缩到最大长度时，对多余空间进行分配，当项目溢出时，对溢出部分的对齐上世家一些控制。
justify-content：flex-start（默认值，向一行的起始位置靠齐）
justify-content：flex-end（向一行的结束位置靠齐）
justify-content：center（向一行的中间位置靠齐）
justify-content：space-between（平均分布在行里，第一个在最起始位置，最后一个在终点位置）
justify-content：space-around（平均分布在行里，两端保留一半空间）
侧轴（竖向）对齐：align-items
align-items:flex-start(伸缩项目仅靠顶端，即侧轴起始位置）
align-items:flex-end(伸缩项目仅靠底端，即侧轴终点位置）
align-items:center(伸缩项目在侧轴中间位置，即上下的中间）
align-items:baseline(伸缩项目根绝基线对齐，参考伸缩项目里面元素的位置）
align-items:stretch(默认值，将伸缩项目的竖向从头拉到底端，填充整个容器）
伸缩行对齐：align-content
本属性在只有一行的伸缩容器上没有效果
align-content:flex-start(各行向伸缩容器的起点堆叠)
align-content:flex-end(各行向伸缩容器的结束堆叠)
align-content:center(各行向伸缩容器的中间堆叠)
align-content:space-between(各行向伸缩容器平均分布)
align-content:space-around(各行向伸缩容器平均分布，两边各有一般空间)
align-content:stretch(默认值，伸展占用剩余空间)
3、定义伸缩项目
一个伸缩项目就是一个伸缩容器的子元素，伸缩容器中的文本也被视为一个伸缩项目。伸缩项目可以嵌套。
每个伸缩项目都有一个主轴长度和一个侧轴长度。一个伸缩项目的宽和高取决于伸缩容器的轴。
显示位置：order
控制伸缩项目在容器中出现的顺序
order:<integer>
扩展空间：flex-grow
主要决定伸缩容器剩余空间按比例应扩展多少空间。默认值为0，number=1时，每个项目将设置成一个大小相等的剩余空间，如果其中一个伸缩项目number=2，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占的两倍
flex-grow：<number>
收缩空间：flex-shrink
定义空间的收缩能力，默认值为1，负值同样生效
flex-shrink:<number>
伸缩比例：flex-basis
设置伸缩基准值，剩余空间按比例伸缩，默认值auto，负值不合法
flex-basis:<length>
flex-basis:auto
flex是flex-grow+flex-shrink+flex-basis的复合体，默认值为0 1 auto
对齐方式：align-self
用来在单独的伸缩项目上重写默认的对齐方式，与align-items相同
实例
float属性进行布局
float属性或position属性时，左右两部分的div元素底部没有对齐
添加box属性
给整体container添加box属性，float失去效果，可以直接去掉
container为盒子，其他三列为伸缩项目，默认与最高的那个项目对齐
将盒子布局修改成多列布局
将container改为多列布局来控制，去掉float和width属性，三个栏目融合在一起，所以多列布局不适用到网页结构控制，适用于文档的多列排版
设计可伸缩网页模板
网页整体：container
内部包含：标题栏header+主体框main-wrap+页脚footer
主体框包含：主栏main-content+导航栏main-nav+侧栏main-sidebar
1、标签基本属性
2、各大栏目属性
3、中间栏目内属性
4、将栏目内属性放进伸缩盒子
5、最终效果
6、优化：将几种不同语法混在一起使用，使flexbox得到更多浏览器的支持
3868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
