弹性盒模型布局方式

问题提出

    在做前端页面的时候，经常会遇到几个问题

    1、布局问题，左右两列布局，左侧固定宽度，右侧自适应；左中右三列布局，左右固定宽度，中间自适应；

    2、一个div，上下左右居中；

    在前端工作中，这两个问题可以说是层出不穷。在布局上有经典的双飞翼布局、圣杯布局等。这些布局就是利用float、position等属性，使其中一部分脱离文档流。而div上下左右居中，则是在网上有一大堆的解决办法，有些好使，有些则不太好用，这里就不在赘述。

 CSS盒模型概念

    众所周知，所有页面元素都可以看成是一个盒子，占据页面一定的空间，并且元素占据的空间，要比实际使用的空间大的多。我们可以调整盒子的边框和间隔，来调整盒子的位置。盒子模型是由内容（content）、边框（border）、间隙（padding）和间隔（margin）组成。它们之间的关系如下图所示：

    盒子实际的宽（高） =  内容（content）+边框（border）+ 间隙（padding）+ 间隔（margin）。对于任何一个元素，可以设置它的width和height来控制内容的宽高，也可以设置边框（border）、间隙（padding）和间隔（margin）。

引入弹性盒模型

    既然每个元素都是一个盒子，那么在盒子里摆放另一个或几个小盒子的时候，就应该可以摆放到任意位置。2009年W3C提出了一种新的布局方案——flex布局，可以简便、完整、响应式的实现各种布局。目前，它已经得到了所有浏览器的支持，这就意味着，我们可以放心大胆的使用这项功能。

    弹性盒模型的一些定义，如主轴、侧轴等概念性的问题，这里就不再谈了，感兴趣的同学可以自行百度，简单来说，主轴就是横轴，侧轴就是纵轴。如果了解过弹性盒模型的同学对下面这张图应该不陌生。

        作为一名真正的程序员，还是直接上代码：

弹性盒子父元素属性

1、定义弹性盒模型：display: flex;

上图说明：弹性盒模型，默认排版方向是在主轴（横轴）方向从左到右。

2、修改排列方向：flex-direction

        flex-direction有四个枚举值：  

            row： 从左到右横向排列（默认值）； 

 

            column：从上到下纵向排列；

 

            row-reverse：从右到左横向排列；

 

            column-reverse：从下到上纵向排列；

 

3、子元素超出，是否换行flex-wrap：

        flex-wrap有三个枚举值：

        nowrap：不换行，子元素会根据父元素的宽度，并结合自身宽度，自动计算出合适的宽度，去适应父元素宽度

 

        wrap：换行，超出部分会自动换到下一行

 

        wrap-reverse：逆序换行，超出部分换行，换行是从下往上

 

4、flex-flow是flex-direction 和 flex-wrap 的简写

        flex-flow: column wrap;

5、子元素在侧轴上的位置align-items

        有5个枚举值：

 

6、修改子元素在主轴上的对齐方式justify-content

            有5个枚举值：

弹性盒子子元素属性

1、子元素的排列顺序 order

        用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

2、子元素的扩展比例flex-grow

        一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。