【博学谷学习记录】超强总结，用心分享 |flex布局

设置盒子display：flex就可以实现弹性盒子的布局模式

1.特点

1.浏览器提倡的布局模型，页面渲染性能高，能快速实现盒子的布局

2.布局简单、方便

3.避免浮动脱标的问题，没有浮动，布局不易影响其他元素

4.兼容性较高（大部分浏览器都可以兼容）

2.组成部分

1.父盒子--添加了display：flex的盒子就是父盒子

2.弹性盒子--所有的子集（后代不算）

3.主轴（一般横向x轴默认为煮粥方向）

4.侧轴

3.主轴的四种对齐方式

             /* 居中 */
            justify-content: center;
            
            /* 间距出现在子级盒子之间 */
            justify-content: space-between;

            /* 父子级之间都有相同的间距 */
            justify-content: space-evenly;

            /* 间距出现在子级两侧 */
            /* 视觉效果: 子级之间的间距是父级左右两侧间距的2倍 */
            justify-content: space-around;

4.侧轴对齐方式

            /* 侧轴居中 */
            align-items: center;

            /* 拉伸, 默认值 */
            align-items: stretch;

其他常用属性

flex：数字--宽度占父盒子剩余宽度的总数的几分，比如盒子2占了1/（2+1），盒子3占了2/（2+1）

.box div:nth-child(2) {
            flex: 1;
        }

        .box div:nth-child(3) {
            flex: 2;
        }

flex-direction: column;主轴方向，默认是横向x轴为主轴方向，但是设置了column则将竖轴设定为了主轴方向，那么此时如果设置了justify-content: center;则会呈现数轴垂直居中的效果

强制换行：flex-wrap: wrap;弹性盒子的特点在于可以将所有子元素放在一行，如果子元素的宽度之和大于父元素，则会等比压缩子盒子的宽度，直至和父盒子匹配，如果想要实现子盒子多行显示，则需要设置强制换行程序--flex-wrap: wrap;默认值是no-wrap，也就是不换行的意思。