Flexbox(弹性盒布局模型)以及适用场景?

1.背景介绍

常用的WEB布局有哪些？

1.静态布局

2.弹性布局

3.流式布局

4.自适应布局

5.响应式布局

FLEX布局是什么？

2009年，W3C提出了一种新的布局方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。 目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

2.知识剖析

一，怎么运用FLEX布局

flex布局非常灵活，任一容器都可以指定为flex布局。块状只需要display属性规定为flex即可。 行内元素也可以指定为flex布局，将display属性设置为inline-flex。 还有WebKit内核的浏览器需要加上-webkit前缀。 需要注意的是设置成为flex布局之后，子元素的float，clear，vertical-align就会失效。

二，基本概念

采用flex布局的元素就被称为flex容器（flex contain），它的所有子元素称为flex项目（flex item）。 容器默认存在两根轴线，一根主轴（main axis）一根交叉轴（cross axis）。 项目默认沿主轴排列，单个项目占据的主轴空间叫main size，占据的交叉轴空间叫cross size。

三. FLEX-BOX容器属性

flex-box(容器)和flex-item(项目)各自都有不同的属性。通过对它们进行不同的设置来对整体布局进行调整以达到想要的效果。

flex-box容器的主要属性有:

1.flex-direction 决定项目在主轴的排列方向。

2.flex-wrap 决定如果一条轴线排不下了，该如何换行。

3.flex-row 是flex-direction和wrap的简写形式，默认row nowrap。

4.justify-content 决定项目在主轴方向上如何对齐。

5.align-items 决定项目在交叉轴上如何对齐。

6.align-content 定义多根轴线如何对齐。

3.常见问题

display:flex可以复合使用吗？

4.解决方案

可以的，一个元素可以是一个display的子元素同时也是另外一个display的父元素。

5.扩展思考

FLEX布局的常用场景

垂直居中，处于中心，以及左中右三块布局

6.参考文献

flexFlex 布局教程: 语法篇--阮一峰的个人博客

问题1：display:flex可以复合使用吗？

回答：可以的，一个元素可以是一个display的子元素同时也是另外一个display的父元素。答案

问题2： flex布局   那三个值  分别代表什么? flex：1  1   1px

回答：答案

问题3：如何在bootstrap和flex做出选择？

回答：答案