前端基础学习笔记弹性盒子模型

た入场券 2022-04-08 12:14 233阅读 0赞

### 基本弹性盒模型演示 ###

div{
        display:flex;
        width:600px;
        border:1px solid red;
    }
    p{
        height:200px;
        border:1px solid blue;
    }

任何元素都可以设置display:flex;因为所有元素意义上都是盒子

**display:inline-flex**

和flex的区别 是flex占据一行，inlineflex占据自己应该占据的位置！有点像inlineblock 不支持margin auto,支持textalign

### 给伸缩容器的属性 ###

弹性盒模型主要就分为 “伸缩容器”和“伸缩项目” 伸缩容器我们可以简单的理解为弹性盒模型父元素！反之伸缩项目就是弹性盒模型的子元素！

**1. 主轴方向（伸缩流方向） fiex-direction**

div{
        flex-direction:row; /*默认*/
        flex-direction:row-reverse; /*水平反向*/
        flex-direction:column; /*竖直*/
        flex-direction:column-reverse; /*垂直反向*/
    }

**2. 交叉轴的方向 flex-wrap 规定伸缩项目是否（子元素）换行**

div{
        flex-wrap:nowrap; /* 默认 不换行*/
        flex-wrap:wrap; /*换行*/
        flex-wrap:wrap-reverse; /*反向换行*/
       }

**flex-flow**

fiex-direction 和  flex-wrap 组成一个复合属性：

div{
        flex-flow:row-reverse wrap; /*反向水平 换行*/
    }

**3. 伸缩项目在主轴对齐方式 justify-content**

div{
        justify-content:flex-start; /*默认 主轴的起点*/
        justify-content:flex-end; /*主轴的终点*/
        justify-content:center; /*在主轴的中部对齐！整体居中*/
        justify-content:space-between; /*两端对齐，轴线之间的间隔平均分布*/
        justify-content:space-around; /*每个项目两侧的间隔都相等*/
    }

**4. 伸缩项目在伸缩容器的单行交叉轴的对齐方式 align-items :单行时候设置**

div{
        align-items:stretch; /*默认 不设置项目高度的时候占满整个容器的高度*/
        align-items:flex-start; /*侧轴的起点对齐*/
        align-items:flex-end; /*侧轴的终点对齐*/
        align-items:center; /*中间对齐*/
        align-items:baseline; /*项目的第一行文字的基线对齐。*/
    }

**5. 多行伸缩项目 对交叉轴的对齐方式。如果项目只有一根轴线，该属性不起作用align-content**

注意：多行当使用aligncontent 不要和alignitems共存

div{
        align-content：stretch; /*默认值 不设置高度的时候轴线占满整个交叉轴。*/
        align-content：flex-start; /*与交叉轴的起点对齐。*/
        align-content：flex-end; /*与交叉轴的终点对齐。*/
        align-content：center; /*与交叉轴的中点对齐。*/
        align-content：space-between; /*与交叉轴两端对齐，轴线之间的间隔平均分布。*/
        align-content：space-around; /*每根轴线两侧的间隔都相等。*/
    }

### 给伸缩项目（子级）的属性 ###

**1  order:1; 伸缩项目的排列顺序。**

order:1;/*默认为0 整数 可以为负值 数值越小，排列越靠 前*/

**2 flex-grow: 指定了该项目应该占用的伸缩容器内的多少空间。**

flexgrow:1;默认是0 单位是数字 没有单位 不支持负值   
值为1的时候 占 一份   
其中有一个值为2的时候 大小将是1的两倍

**3 flex-shrink 当Flex项目的总大小大于Flex容器时，Flex项目将缩小以根据编号填充容器。**

flexshrink默认属性为1，当空间不足时，都将等比例缩小。 不支持负值   
如果一个项目的flexshrink属性为0，其他项目都为1，则空间不足时，前者不缩小。   
如果所有项目的flexshrink属性都为1，其中一个项目的flexshrink属性为3，当空间不足时，为3的  
这个项目会缩小的更多，缩小的部分会平分给等于1的盒子

总结：值越小缩小的越少，越大缩小的越多

**4 flex-basis 设置项目的初始长度**

给flexbasis只是初始值，以后会随着内容的变化吧盒子撑大   
可以理解为盒子的宽度，当我们他的值是auto时，盒子的宽度取决于width

flex-basis:100px; /*默认值为auto：自适应内容撑开*/

**5 flex简写属性**

flex属性是flexgrow, flexshrink 和 flexbasis的简写，默认值initial可以表示为0 1 auto   
flex: auto 它代表 1 1 auto. auto 是有内容的撑开之后，剩下的空间几个盒子平分！   
flex:none  0 0 auto 是内容的宽度！ 不放大 不缩小 自动   
flex:1  是平分盒子，每个盒子占多少分之一 代表 1 1 0 放大 缩小 自动.  
如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 flex: none，none 将会被解释为 0 0 auto.   
如果想要一个固定大小的元素，则设置 flex: 0 0 size。如：flex 0 0 60px。   
如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置flex: auto

**6 align-self 属性允许单个项目与其他项目不一样的对齐方式**

可覆盖alignitems属性。默认值为auto，表示继承父元素的alignitems属性，如果没有父元素，则等同于stretch。

flex-start; /*交叉轴的起点对齐。*/
    flex-end; /*交叉轴的终点对齐。*/
    center; /*交叉轴的中点对齐。*/
    baseline; /*项目的第一行文字的基线对齐。*/
    stretch; /*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/