前端：flex：弹性盒子属性如何使用，实现div在div内水平垂直居中，div显示在一行，div之间间隔相同

快来打我* 2023-06-07 12:03 160阅读 0赞

#### 前端：flex：弹性盒子属性如何使用 ####

在html中多个div是换行显示的，如果我要一行显示多个div盒子怎么办？  
这里离我可用float是可以实现的，但是今天我们讲讲flex  
直接上效果图  
谷咕咕用的开发工具是visual，这里无所谓的。

.father{ height: 300px; 
            background: #cccccc;
            /* display: flex; */
                } 
        .flex{ width: 100px; 
            height: 100px;}
        .flex.son1{ background:#ff0000;}
        .flex.son2{ background:#00ff00;}   
        .flex.son3{ background:#0000ff;}

这里如果我们注释掉display: flex;效果是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]  
如果我们释放display: flex;这样是不是很简单的实现了一个父组件中子组件的并排显示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 1]  
如果我加上justify-content: center;align-items: center;可以控制子组件的水平、垂直居中。

.father{ height: 300px; 
            background: #cccccc;
            display: flex;
            justify-content: center;/*水平居中*/
    		align-items: center;/*垂直居中*/
                }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 2]  
justify-content: space-between;可以让子组件之间的间隔相同。

.father{height: 300px; 
            background: #cccccc;
            display: flex;
            justify-content: space-between;/*平均间隔*/
    		align-items: center;/*垂直居中*/
                }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20230601/ae520e6a66fb4d96bc2c91d0bbc934f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 1]: /images/20230601/fdf8ea7ce76545648d3ff5bf5c139c63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 2]: /images/20230601/607b40a1323f4dafacafe824a41c75e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70 3]: /images/20230601/29f937f48cf64540a330a44e3d465450.png