移动web开发之flex布局

最新推荐文章于 2023-06-16 14:25:52 发布

shirlyran

最新推荐文章于 2023-06-16 14:25:52 发布

阅读量195

点赞数

文章标签： flex

本文链接：https://blog.csdn.net/shirlyran/article/details/107287024

版权

1.flex布局体验

1.1传统布局与flex布局

传统布局

兼容性好
布局繁琐
局限性，不能在移动端很好的布局

flex布局

操作方便，布局即为简单，移动端应用很广泛
PC端浏览器支持情况较差
IE11或更低版本不支持或仅部分支持

怎么选择：

1.如果是PC端页面布局，选择传统布局

2.如果是移动端或者不考虑兼容性问题的PC端页面布局，选择flex弹性布局

1.2体验

1.搭建HTML结构

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

2.display: flex;||flex: 1;

    <style>
        div {
            width: 80%;
            height: 100px;
            display: flex;
            background-color: lightblue;
        }
        
        div span {
            width: 150px;
            height: 50%;
            background-color: skyblue;
            margin-right: 5px;
        }

        div span {
            /* 不要宽度 */
            /* width: 150px; */
            height: 50%;
            background-color: skyblue;
            margin-right: 5px;
            flex: 1;
        }
    </style>

flex不需要清除浮动

2布局原理

2.1布局原理

flex是flexible box的缩写，意为“弹性布局”，任何一个容器都可以指定为flex布局

当我们为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
上面代码中的div就是flex父容器，span是子容器 flex项目
子容器可以横向排列也可以纵向排列

总结：flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3.flex布局父项常见属性

3.1常见父项属性

flex-direction：设置主轴方向
justify-content：设置主轴上子元素的排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素的排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.2 flex-direction：设置主轴方向☆

1.主轴和侧轴

2.属性值

主侧轴的方向是会变化的，就看flex-direction设置谁为主轴

3.3 justify-content：设置主轴上子元素的排列方式☆

justify-content属性定义了项目在主轴上的对齐方式

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

3.4 flex-wrap：设置子元素是否换行☆

flex-wrap默认不换行，如果装不下，会缩小子元素宽度，放在同一行

3.4 align-items：设置侧轴上的子元素的排列方式（单行）☆

3.5 align-content：设置侧轴上的子元素的排列方式（多行）

单行下是没有效果的

3.6 align-items和align-content的区别

align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适用于多行的情况，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行用align-items，多行用align-content

3.7 flex-flow

复合属性，相当于同时设置了flex-direction和flex-wrap

/* flex-flow: flex-direction flex-wrap */
flex-flow:row wrap

4.flex背景子项常见属性

flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

4.1 flex属性☆

flex属性定义子项目分配剩余空间，用flex来表示占多少份数（占剩余空间的份数）

.item {
    flex: <number> /* 默认值为0 */
}

<style>
        div {
            width: 50%;
            height: 100px;
            display: flex;
            margin: 0 auto;
            background-color: lightblue;
        }
        /* 将div平均分成四份 */
        div span {
            flex: 1;
        }
    </style>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

4.2 align-self控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-item属性
默认值为auto，表示继承父元素的align-items 属性，如果没有父元素，则等同于stretch

第一个span盒子垂在底部，其余span盒子在垂直方向上居中：

    <style>
        div {
            width: 50%;
            height: 500px;
            display: flex;
            margin: 0 auto;
            background-color: lightblue;
            align-items: center;
        }
        
        div span {
            width: 100px;
            height: 100px;
        }
        
        div span:nth-child(1) {
            background-color: lightgoldenrodyellow;
            align-self: flex-end;
        }
        
        div span:nth-child(2) {
            background-color: lightgreen;
        }
        
        div span:nth-child(3) {
            background-color: lightpink;
        }
        
        div span:nth-child(4) {
            background-color: lightyellow;
        }
    </style>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

4.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0；
和z-index不一样

shirlyran

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web开发之flex布局

1.flex布局体验1.1传统布局与flex布局传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局flex布局操作方便，布局即为简单，移动端应用很广泛 PC端浏览器支持情况较差 IE11或更低版本不支持或仅部分支持怎么选择：1.如果是PC端页面布局，选择传统布局2.如果是移动端或者不考虑兼容性问题的PC端页面布局，选择flex弹性布局1.2体验1.搭建HTML结构<body> <div> .
复制链接

扫一扫