弹性盒子模型详解与特性

}
.wrap span{
width: 100px;
height: 100px;
background: yellow;
border:2px solid #000;
font-size: 40px;
text-align: center;
line-height: 100px
/flex-direction控制主轴方向排列X 轴
row默认主轴排列方式
row-reverse方向相反
row-column Y轴方向排列/
}

1
2
3
4

display: flex; flex-direction: row;/*默认属性 row 如果改成垂直显示 子元素高度会等比例压缩*/ flex-wrap: nowrap;/*水平方向换行方式 默认nowrap如果显示不开等比例压缩*/ justify-content: space-around; /*子元素水平对齐方式 flex-start 左对齐 flex-end 右对齐 center 居中对齐 space-between 两端对齐 space-around 等间距对齐； */ align-items: center; /* 子元素的垂直对齐方式 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/ order /*用来决定子元素的排列顺序越小越靠前*/ /*flex-grow: 1;*/ /*剩余空间的分配比例：默认为0 不分配 值越大 分配比例越多*/ flex-shrink: 0; /*空间不足时的压缩设置 默认为1 等比例压缩 如果一个元素不想等比例压缩 只需要给这个元素设置为零 */ flex-basis: 500px; /*定义元素的固定基础宽度 如果还有剩余空间 则所有元素均分剩余空间*/ 1：如果一个普通元素想成为弹性盒子元素只需要给元素添加display：flex; 2：弹性盒子基本上是添加给父元素，为的是让其中的子元素可以按照flex的规则进行布局 如果子元素中还有孙子元素按照弹性盒子的规则进行布局，那么子元素也要添加display：flex； 3:如果父元素添加了display：flex属性那么子元素中float clean position等属性无效 https://blog.csdn.net/qq_42786725/article/details/81332235