今天咱们谈flex布局和传统浮动布局,首先是要了解什么是flex布局,又为何产生这样的布局呢?

像我们一般网页开发的时候避免不了要布局页面,实现多个盒子横向排列使用什么属性,一般用的比较多的是我们的浮动,设置盒子间的间距使用什么属性,margin属性来设置盒子间的间距.

## 但是这些传统的布局方式往往有弊端,浮动的盒子脱标,还会出现父子盒子的塌陷问题,为了避免这些在网页开发过程中出现的这些问题,

Flex布局/弹性布局就是一种浏览器提倡的布局模型,并且布局网页更简单、灵活,还避免浮动脱标的问题 和盒子塌陷问题的发生.

> 现在开始带大家了解一下flex布局

作用:

1. 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
2. 任何一个元素都可以直接给宽度和高度一行显示

设置方式:父元素添加 display: flex，子元素可以自动的挤压或拉伸

组成部分:

弹性容器
弹性盒子

主轴(默认主轴排列)

侧轴 / 交叉轴

主轴对齐方式

• 修改主轴对齐方式属性: justify-content
• justify: 每行排齐方式

.box{
            display: flex;
            /* 从头开始 */
            justify-content: flex-start;
            /* 从后面开始 */
            justify-content: flex-end;
            /* 居中对齐 */
            justify-content: center;
            /* 两边都有间隙,中间是傍边的两倍 */
            justify-content: space-around;
            /* 两边没有空隙,只有中间有 */
            justify-content: space-between;
            /* 每个边有均等的空隙,空隙是一样的大 */
            justify-content: space-evenly;
            width: 600px;
            height: 300px;
            border: 1px solid pink;
        }
        .box span{
            width: 150px;
            height: 300px;
            background-color: red;
        }

修改主轴对齐方式属性: justify-content

1. justify-content: space-evenly;(每个边有均等的空隙,空隙是一样的大)

2. justify-content: space-between;(两边没有空隙,只有中间有)

3. justify-content: space-around;(两边都有间隙,中间是傍边的两倍)

侧轴对齐方式

• 使用align-items调节元素在侧轴的对齐方式
• align-items（添加到弹性容器-父级 ）
• align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级）

.box{
            display: flex;
            /* 顶部对齐 */
            align-items: start;
            /* 底部对齐 */
            align-items: end;
            /* 居中对齐 */
            align-items: center;
            /* 拉伸 */
            align-items: stretch;
            justify-content: space-between;
            width: 600px;
            height: 300px;
            border: 1px solid #000;
        }
        .box span{
            background-color: red;
        }

1. align-items: center;(侧轴居中对齐)

2.子盒子水平垂直居中(使用flex布局让盒子水平居中)

 .box{
            display: flex;
            justify-content: center;
            /* align-items: center; */
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .box span{
            align-self: center;
            width: 100px;
            height: 100px;
            background-color: blue;
        }