移动端页面制作之flex弹性布局

最新推荐文章于 2024-04-10 10:17:20 发布

代森森

最新推荐文章于 2024-04-10 10:17:20 发布

阅读量480

点赞数 5

CC 4.0 BY-SA版权

分类专栏：个人笔记文章标签： css html css3

本文链接：https://blog.csdn.net/ovocc/article/details/121397166

个人笔记专栏收录该内容

23 篇文章

订阅专栏

本文详细探讨CSS3的flex布局，包括其原理和使用。重点介绍了父盒子的justify-content、flex-wrap、flex-direction和align-content属性，以及子盒子的flex、align-self和order属性，帮助理解如何控制移动端页面元素的位置和排列。

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

前言

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

原理
父盒子常见属性
子盒子常见属性

原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

采用flex布局的元素，称为flex容器，简称容器。他的所有子元素自动成为容器成员，称为flex项目，简称项目

    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: rgb(212, 192, 255);
            margin-right: 5px;
            flex: 1;
        }
    </style>

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

在上面案例代码中，父盒子添加了flex,此时div称为容器，而他的子盒子span为项目。

父盒子常见属性

一justify，align和flex二乘二
意思就是重要的五个父盒子属性里面
一个是justify开头，justify-content设置主轴上的子元素排列方式
二个align开头，algin-item设置侧轴上的子元素排列方式（单行）；align-content设置侧轴上的子元素的排列方式（多行）
二个flex开头，flex-wrap设置子元素是否换行，flex-direction:设置主轴的方向

justify-content

justify-content设置主轴上的子元素排列方式,但是使用该属性的时候一定确定好主轴是哪个

常见属性值

案例

  <style>
        div {
            /* 给父亲添加flex */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认主轴是x轴行，y轴是侧轴，元素随着主轴排列 */
            flex-direction: row;
            /* justify-content:设置主轴上子元素的排列方式 ; */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: rgb(212, 192, 255);
        }
    </style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

flex-wrap

flex-wrap设置子元素是否换行，一般情况下，项目都排在一条线上。flex-wrap属性定义默认是不换行，如果放不下，会缩小子元素的宽度

常见属性

flex-direction

flex-direction属性决定主轴的方向（即项目的排序方向），主轴和侧轴是会变化的，就看flex-direction设置的谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的

常见属性

align-content

align-content设置侧轴上的子元素的排列方式（多行），在单行是没有效果的

常见属性

algin-item

algin-item设置侧轴上的子元素排列方式（单行）

常见属性

子盒子常见属性

flex

子项目占的份数

align-self

控制子项自己在侧轴的排列方式

    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            align-items: flex-end;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(2) {
            order: -1;
        }
        
        div span:nth-child(3) {
            align-self: start;
        }
    </style>
</head>

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

order

属性定义子项的排列顺序（前后顺序）

    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            align-items: flex-end;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(2) {
            order: -1;
        }
        
        div span:nth-child(3) {
            align-self: start;
        }
    </style>
</head>

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