flex布局改变主轴方向及弹性盒子换行

最新推荐文章于 2024-06-12 14:19:48 发布

娇媛淡佰

最新推荐文章于 2024-06-12 14:19:48 发布

阅读量327

点赞数 1

本文链接：https://blog.csdn.net/weixin_72814343/article/details/131494293

版权

本文介绍了CSS3的Flex布局，讲解如何改变主轴方向使弹性盒子垂直排列，展示了一个弹性盒子垂直排列的小案例。此外，还探讨了弹性盒子的换行特性，通过设置`flex-wrap`属性实现换行显示，并讨论了设置侧轴对齐方式的方法，包括`align-items`和`align-content`属性在多行垂直对齐中的应用。

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

1.设置主轴方向

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

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

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

语法:

flex-direction：column;

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

弹性盒子垂直排列小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 350px;
            height: 58px;
            margin: 100px auto;
            background-color: pink;
            display: flex;
            justify-content: center;
        }

        .box a {
            width: 70px;
            height: 5

最低0.47元/天解锁文章

娇媛淡佰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局改变主轴方向及弹性盒子换行

align 垂直比如 align-items 垂直对齐 align-content 多行垂直对齐。content 主轴 justify-content align-content 侧轴多行对齐。所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。修改主轴方向属性: flex-direction。1. flex换行加给父元素。2.flex布局默认是不换行的。主轴默认是水平方向, 侧轴默认是垂直方向。修改完毕，主轴是Y轴，侧轴是X轴。多行侧轴排列方式,一般配合换行使用。特性：给父亲添加了。
复制链接

扫一扫