flex弹性布局解析——适用于移动端的布局

最新推荐文章于 2024-11-29 15:44:38 发布

iiStar*

最新推荐文章于 2024-11-29 15:44:38 发布

阅读量405

点赞数 1

CC 4.0 BY-SA版权

文章标签： flex

本文链接：https://blog.youkuaiyun.com/weixin_45621662/article/details/104563345

本文深入讲解Flex弹性布局的原理和应用，包括如何通过给父盒子添加flex属性来控制子盒子的位置和排列方式，以及Flex布局在移动端开发中的优势和PC端浏览器的支持情况。探讨了Flex父项和子项的常见属性，如flex-direction、justify-content和flex等，通过实例展示了不同属性的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex弹性布局

○操作方便，布局简单，广泛应用于移动端开发

○PC端浏览器支持情况较差

○IE 11及以下版本不支持，或仅部分支持

任何一个容器都可以指定为flex布局

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

注：当父盒子设置为flex布局后，子元素的float、clear和vertical-align属性会失效

flex父项常见属性

默认主轴方向水平向右，侧轴方向竖直向下

1 flex-direction 设置主轴方向

属性值：row|row-reverse|column|column-reverse
在这里插入图片描述
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T5QUeIkj-1582891689912)(C:\Users\Administrator\Pictures\flex布局图\row-reverse)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jiA1y07m-1582891689912)(C:\Users\Administrator\Pictures\flex布局图\column)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i1Bf9p89-1582891689912)(C:\Users\Administrator\Pictures\flex布局图\column-reverse)]$
2 justify-content 设置主轴上子元素的排列方式

属性值：flex-start|flex-end|center|space-around|space-between

这里我把主轴方向设置为row
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ChNsSztI-1582891689912)(C:\Users\Administrator\Pictures\flex布局图\justify-content\flex-start)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oG3FPulX-1582891689912)(C:\Users\Administrator\Pictures\flex布局图\justify-content\flex-end)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S0s6PF9I-1582891689912)(C:\Users\Administrator\Pictures\flex布局图\justify-content\center)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LBC9rAYt-1582891689913)(C:\Users\Administrator\Pictures\flex布局图\justify-content\space-around)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UXV16uu3-1582891689913)(C:\Users\Administrator\Pictures\flex布局图\justify-content\space-between)]$
3 flex-wrap 设置子元素是否换行（默认不换行，装不下会缩小子元素的宽度）

属性值：nowrap|wrap
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idfCwBoe-1582891689913)(C:\Users\Administrator\Pictures\flex布局图\nowrap)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fx3S8YWs-1582891689913)(C:\Users\Administrator\Pictures\flex布局图\wrap)]$

4 align-content 设置侧轴上子元素的排列方式（多行/出现换行）

主轴侧轴按照默认
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hRzAzpk9-1582891689913)(C:\Users\Administrator\Pictures\flex布局图\align-content\flex-start)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vKcleViS-1582891689914)(C:\Users\Administrator\Pictures\flex布局图\align-content\flex-end)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fYTXM9oV-1582891689914)(C:\Users\Administrator\Pictures\flex布局图\align-content\center)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wZECiHeG-1582891689914)(C:\Users\Administrator\Pictures\flex布局图\align-content\space-around)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I5rWX3kQ-1582891689915)(C:\Users\Administrator\Pictures\flex布局图\align-content\space-between)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eA08O9Zm-1582891689915)(C:\Users\Administrator\Pictures\flex布局图\align-content\stretch)]$
5 align-items 设置侧轴上子元素的排列方式（单行）

属性值：flex-start|flex-end|center|stretch

主轴侧轴按照默认
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jY4vDZym-1582891689915)(C:\Users\Administrator\Pictures\flex布局图\align-items\center)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W953v4EH-1582891689915)(C:\Users\Administrator\Pictures\flex布局图\align-items\stretch)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R9WU4Cmh-1582891689916)(C:\Users\Administrator\Pictures\flex布局图\row nowrap)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yXnIWfDM-1582891689916)(C:\Users\Administrator\Pictures\flex布局图\row wrap)]$

flex子项常见属性

1 flex 定义子项分配剩余空间，用flex表示占的份数
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wm9Z9FMM-1582891689916)(C:\Users\Administrator\Pictures\flex布局图\flex)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section{
            width: 60%;
            height: 200px;
            margin: 0 auto;
            display: flex;
        }
        section div:nth-child(1){
            width: 100px;
            height: 200px;
            background-color: pink;

        }
        section div:nth-child(2){
            /*width: 100px;*/
            /*height: 200px;*/
            background-color: red;
            flex: 1;

        }
        section div:nth-child(3){
            width: 100px;
            height: 200px;
            background-color: pink;
        }
        h2{
            text-align: center;
        }
    </style>
</head>
<body>
<section>
    <div></div>
    <div></div>
    <div></div>
</section>
<h2>左右固定，中间自适应布局</h2>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            background-color: darkgray;
            width: 800px;
            height: 300px;
            display: flex;
        }
        div span{
            background-color: pink;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            margin: 10px 10px;
        }
        div span:nth-child(1),div span:nth-child(3){
            align-self: flex-end;
        }
    </style>
</head>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
</body>
</html>

3 order 定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0

例：将2号盒子提到1号盒子前面
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfNczrPT-1582891689916)(C:\Users\Administrator\Pictures\flex布局图\order)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            background-color: darkgray;
            width: 800px;
            height: 300px;
            display: flex;
        }
        div span{
            background-color: pink;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            margin: 10px 10px;
        }
        div span:nth-child(2){
            order: -1;
        }
    </style>
</head>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
</body>
</html>