弹性盒模型布局flex

一、什么是 flex?

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提
供最大的灵活性。

.box{
        display:flex;
      }

行内元素也可以设置弹性盒。

.box{
         dispalye:inline-box;
        }

Webkit 内核的浏览器，必须加上‑webkit前缀。

.box{
        display:-webkit-flex;
      }

弹性盒的属性：

    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

- flex-direction

决定主轴项目的排列方向

flex-direction: row

横向从左到右排列（左对齐），默认的排列方式。

html代码：

        
1
        
2
        
3
        
4
        
5

css代码：

效果如图：

flex-direction：row.png

flex-direction: column;

纵向从上到下排列（左对齐），默认的排列方式。

flex-direction：column.png

flex-direction: row-reverse;

反向横向排列（右对齐，从后往前排，最后一排在对前面。）

flex-direction：row-reverse.png

flex-wrap：wrap;

元素排列在一排，当第一排的剩余宽度小于子元素宽度时，会自动换行。
效果如图：

flex-wrap1.png

flex-wrap：nowrap;

元素排列在一排不会换行，但当所有子元素宽度之和大于弹性盒宽度时，子元素的宽度会被挤压。

flex-wrap2.png

justify-content:center;

弹性盒中的子元素会自动水平居中。

效果如图：

justify-content1.png

justify-content:space-around;

弹性盒中的子元素会自动以相同的间隔水平分布，两侧离父元素的宽度，为子元素之间间隔的一半。
效果如图：
[图片上传失败...(image-2962a-1563192468782)]

justify-content:space-between;

弹性盒中的子元素会以相同的间隔水平分布， 左右两端的子元素会紧贴父元素的边缘。
效果如图：

justify-content3.png

align-items:center;

弹性盒中的子元素会在垂直方向上居中。
效果如图：

align-items-1.png

align-content:center;

该属性为多跟轴线的对齐方式，如果只有一条轴线，则该属性无效。

完美居中的方式

给父元素一个 display:flex，给子元素margin:auto，即可实现。

html:

        
我是居中
        
 

css:

效果如图：

完美居中方式。.png