一 flex 1.添加DF盒子,叫弹性容器 2.默认宽度就是父元素的宽度 3.伸缩比: flex:1; 1.均分父盒子宽度 2.其他弹性盒子宽度固定,只有一个盒子flex:1; 那么剩余的全部宽度给到flex:1; 的弹性盒子
二. 弹性盒子:就是弹性容器最近一级子元素 特点: 1.默认宽度由内容撑开,默认的高度和父元素等高; 2.弹性盒子没有块级元素,行内块元素,行内元素之分,统称为弹性盒子,统统都可以设置宽高. 3.弹性盒子默认不会换行,会沿着主轴方向一行显示.
三. 主轴方向的对齐方式,给单行容器添加 js. 1.flex-start:默认值,起点开始一次排列 2.flex-end:在终点开始依次排列 3.center 沿主轴居中排列 4.space-around 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 5.space-beteewn 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间 6.space-evenly 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等.
ai. align-items 垂直方向
1.stretch 默认值拉伸,拉升到弹性盒子与弹性容器高度一致.
as. align-self
1.需要单独控制侧轴方向对齐方式的弹性盒子添加
