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

基本弹性盒模型演示

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，将占满整个容器的高度。*/