移动端flex布局

最新推荐文章于 2022-10-01 23:38:06 发布

浩哥学习编程之路

最新推荐文章于 2022-10-01 23:38:06 发布

阅读量616

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/m0_46978034/article/details/115699250

版权

Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局

flex弹性盒布局的优点：弹性盒是一个简单而强大的布局方式，我们通过弹性盒指明空间的分布方式，内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。通过弹性盒内容可以轻易的横向或纵向排列。

Flex布局原理就是：给父盒子添加display:flex；属性，来控制子盒子的位置排列方式从而实现flex布局 任何一个容器都可以指定为flex布局(不管是行内，还是块级，等等)

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

flex布局更适合移动端，PC端兼容性极差 如果是移动端或者是不考虑兼容性PC端的，还是建议使用flex布局

采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，注意是子元素，简称flex项目 如果孙元素也想采用flex布局那就得重新给父元素设置flex了 flex可以进行嵌套的既可以即是容器也可以即是元素

常见父项属性

1.flex-direction设置主轴的方向
在flex布局中，是分为主轴和侧轴俩个方向的，也叫做行和列或者x轴和y轴

默认主轴是x轴，水平向右
默认侧轴是y轴，水平向下

属性值
语法如下

flex-direction属性决定主轴的方向 注意我们主轴和侧轴是会变化的，就看设置那个方向为主轴了，而我们的元素是跟着主轴来排列的 比如y设置为主轴那么x就是侧轴了

属性值	描述
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

代码演示

      * {
            padding: 0px;
            margin: 0px;
        }
        
        ul {
            width: 80%;
            height: 300px;
            background-color: pink;
            list-style: none;
            /* 给父元素开始flex布局 */
            display: flex;
            /* 给父元素设置主轴方向  flex-direction 这里设置主轴方向为Y轴那么剩下的侧轴就是x轴了
            注意元素是跟着主轴走的 */
            flex-direction: column;
        }
        
        ul li {
            width: 100px;
            height: 100px;
            background-color: peru;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

在这里插入图片描述 2.justify-content设置主轴上的子元素排列方式跟侧轴没关系
语法如下

justify-content：属性定义了子元素在主轴上的排列方式

注意：使用这个属性之前一定要确定好主轴是那个

属性值	描述
flex-start	默认值从头部开始如果主轴是x轴

最低0.47元/天解锁文章

浩哥学习编程之路

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端flex布局

Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局flex弹性盒布局的优点：弹性盒是一个简单而强大的布局方式，我们通过弹性盒指明空间的分布方式，内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。通过弹性盒内容可以轻易的横向或纵向排列。Flex布局原理就是：给父盒子添加display:flex；属性，来控制子盒子的位置排列方式从而实现flex布局当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
复制链接

扫一扫