flex布局演示

发表评论

针对 CSS的Flex布局(弹性盒子) 内容的补充

Flex 弹性盒子 （排版专用）

以主轴排列+次轴排列的方式操作子元素的父盒子
flex 的盒子默认是横向布局
使用的目的：按照布局效果优雅的排列我们的内容
flex-direction: column; // 纵向布局
flex-direction: row; // 横向布局
特点：默认情况下：子元素会随着父元素的宽高变化
父元素宽高足够时，子元素宽高保持不变
父元素体积太小时，会压缩子元素宽高
子元素添加 flex-shrink: 0; 阻止压缩,但是会溢出
父元素添加 flex-wrap: wrap; 可让溢出的子元素换行
父元素添加 flex-wrap: wrap; 可让溢出的子元素换行
使用 justify-content，可以对主轴实现布局
space-evenly 主轴布局-均匀分配
space-between 主轴布局-均匀分配-无缝
space-start 主轴布局-靠前
space-end 主轴布局-靠后
space-evenly 主轴布局-均匀分配
space-between 主轴布局-均匀分配-无缝
space-start 主轴布局-靠前
space-end 主轴布局-靠后
使用align-items，可以对次轴实现布局
center 次轴居中-居中
start 次轴居中-靠前
end 次轴居中-靠后
center 次轴居中-居中
start 次轴居中-靠前
end 次轴居中-靠后

发表回复