网站建设一般预付比例多少,房产信息网上自助查询,建立百度网站,龙岗网站建设公司电话容器内子组件排列方向
子组件竖直方向排列#xff08;默认#xff09; 子组件水平方向排列
style
.container {flex-direction: row;direction: ltr;
}
/style子组件在父组件容器中的对齐方式
我们主要使用两个属性实现子组件在父组件的对齐方式#xff…容器内子组件排列方向
子组件竖直方向排列默认 子组件水平方向排列
style
.container {flex-direction: row;direction: ltr;
}
/style子组件在父组件容器中的对齐方式
我们主要使用两个属性实现子组件在父组件的对齐方式 justify-content align-items 先说一个常识 父组件一定要有足够的宽高才能看到效果要是宽高不够那怎么样对齐都是一个样子的
justify-content影响 子组件排列方向同方向的对齐 align-items影响 子组件 排列方向的垂直方向的对齐
align-items的属性值
flex-start 起始点对齐flex-end 终点对齐center 中心点对齐stretch 子组件拉伸撑满父组件在子组件排列的垂直方向上。 比如子组件是水平排列那么align-items为stretch属性值时会在竖直方向拉伸并撑满父组件
align-items属性的默认值
子组件水平排列水平排列时默认为flex-start.子组件竖直排列竖直排列时默认为stretch 这也是为什么div内包裹text时text默认会占满屏幕的整个宽度
justify-content的属性值
flex-start 起始点对齐flex-end 终点对齐center 中心点对齐space-between 子组件在 排列方向上平均分布组件之间的间隔相等。space-around-不建议使用实际效果与官方文档不一致-
flex属性
flex属性就是子组件在父组件中排列的所占权值。
如果有3个子组件 A组件flex: 1, B组件flex: 1, C组件flex: 1, 那么它们在排列方向上都将获得 1/3的空间。如果有3个子组件 A组件flex: 1, B组件flex: 2, C组件flex: 1, 那么它们在排列方向上将获得 A1/4, B 2/4, C 1/4的空间。
