弹性盒模型布局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代码：

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

css代码：

 <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 500px;
            height: 300px;
            border: 2px solid #c23;
            display: flex;
            flex-direction: row;
            margin: 100px 0 0 100px;
        }
        li{
            width: 80px;
            height: 50px;
            border: 2px solid #ccc;
            background-color: #cfc;
            font-size: 25px;
        }
    </style>

效果如图：

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:

<ul>
        <li>我是居中</li>        
 </ul>

css:

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 500px;
            height: 300px;
            border: 2px solid #c23;
            margin: 100px 0 0 100px;
            display: flex;            
        }
        li{
            width: 80px;
            height: 50px;
            border: 2px solid #ccc;
            background-color: #cfc;
            font-size: 15px;
            text-align: center;
            line-height: 50px;
            margin: auto;
        }
    </style>

效果如图：

完美居中方式。.png