c3弹性盒—Flex布局

约定不等于承诺〃 2022-11-21 09:52 348阅读 0赞

#### 什么是弹性盒 ####

当我们为父盒子设为flex布局以后，他的所有子元素自动成为容器成员，子元素的float、clear和vertical-align属性将失效。也就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

#### 概念： ####

弹性盒式c3中提出的一种布局方案。是为了针对不同屏幕不同设备的一整套解决方案。主要针对一个容器中的子元素进行排列、对齐、空间分配。

#### \#\#\#\# Flex布局（弹性盒布局） ####

**添加给父元素的属性：**  
**1、display:形成弹性盒子**

+ display:形成弹性盒子
            - flex(常用)/inline-flex(内联弹性盒子);
        + flex-direction:设置主轴的方向
            - row(默认,常用)/row-revese(主轴反向)/column(常用)/column-reverse(主轴反向)
        + flex-wrap： 设置子元素换行
            - nowrap(不换行)/wrap(换行)/wrap-reverse(反向换行);
        + flex-flow: 主轴和换行的简写
            - flex-direction flex-wrap; 
        + justify-content:  设置（主轴）的对齐方式
            - flex-start(主轴起点)/flex-end(主轴终点)center (中心,重要)space-between(两端，重要)space-around(类似盒子产生左右相同的margin，重要)space-evenly(平均，重要);
        + align-items:设置主轴的交叉轴 也就是侧轴的对齐方式
            - flex-start(侧轴起点)/flex-end(侧轴终点)/center(常用)/baseline(基线)/stretch（默认值拉伸,子元素不要设置高
            度）
        + align-content: 设置多行之间的排列
            - flex-start(主轴起点)flex-end/center/space-between /space-around/stretch;

**子元素**  
\* 子元素

+ align-self: 设置子元素的排列方式
            - stretch
            - center
            - flex-start
            - flex-end
        - flex-grow: 分配父元素的空间
            - 数值
        - flex-shrink: 设置压缩
            - 默认情况下超出父元素会压缩
            
            - 设置 flex-shrink:0;表示不压缩
           + 设置导航滑动
               1.子元素设置  flex-shrink:0,不压缩
               2.超出对父元素设置overflow:auto
        - order:单独设置某个元素的位置
            - 数值,值越大,越靠后
        - flex: 1; 设置一个值表示和flex-grow一个意思;