设置主轴方向和弹性盒子换行~~~~

最新推荐文章于 2024-09-05 01:30:55 发布

精力充沛的码农

最新推荐文章于 2024-09-05 01:30:55 发布

阅读量3.5k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_57320268/article/details/122930958

版权

本文介绍了CSS3中如何设置弹性盒子的主轴方向，通过`flex-direction`属性可以将主轴从默认的水平方向改为垂直方向。同时讲解了弹性盒子的换行显示，使用`flex-wrap: wrap;`可以让子元素在一行内无法容纳时换行。此外，还提及了侧轴的对齐方式，包括`align-content`和`align-items`用于多行和单行的垂直对齐控制。

摘要由CSDN通过智能技术生成

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值	作用
`row`	行, 水平(默认值)
`column`	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

flex-direction：column;

修改完毕，主轴是Y轴，侧轴是X轴。

2.弹性盒子换行

特性：给父亲添加了 `display: flex;` 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap: wrap;

3 设置侧轴对齐方式

此处设置侧轴多行的垂直对齐方式。 align-content（少）
和前面学过的 align-items （侧轴单行垂直对齐）（多）
align 垂直比如 align-items 垂直对齐 align-content 多行垂直对齐
content 主轴 justify-content align-content 侧轴多行对齐

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间