flex弹性布局(移动端)【小白适用】

最新推荐文章于 2025-05-30 20:23:59 发布

「已注销」

最新推荐文章于 2025-05-30 20:23:59 发布

阅读量1.1k

点赞数 4

分类专栏：移动端文章标签： flex 弹性布局移动端前台小白适用

本文链接：https://blog.youkuaiyun.com/weixin_44063334/article/details/89459867

版权

移动端专栏收录该内容

1 篇文章

订阅专栏

一：flex弹性布局适用的网站:
flex弹性布局适合各个电商网站，近几年在移动端显得尤为重要，
下图就为大家众所周知的移动端淘宝首页的分类栏
在这里插入图片描述

二：为什么要使用flex弹性布局：
在我们之前学的pc端的网页中实现上图的效果一般都使用的是float属性，然而移动端前台就要避免使用float属性，因为我们做的前端要适应各种尺寸的手机，使用float会产生布局变化，比如一行有五个图片，如果用尺寸小的手机那么就有可能出现最后的几个图片被挤到下一排的效果，布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。flex不仅使用方便而且可以很好的避免这种效果，所以flex越来越被使用，尤其是移动端。

三：flex中的基本属性（如何使用）：
1.任何容器都可以设置为弹性布局
（设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。）

2.采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

3.使用flex达到的效果是按照两条垂直轴来设置的（主轴和交叉轴）内容默认水平居左上方。
在这里插入图片描述
4.基本格式：

.box{
	display:flex;//使用flex弹性布局
}

5.flex的基本属性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
常用属性：
(1)justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
	/*flex-start（默认值）：左对齐
	flex-end：右对齐
	center： 居中
	space-between：两端对齐，项目之间的间隔都相等。
	space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
}

钱三种比较好理解后面我们就主要实现一下后面两种来方便大家理解
justify-content: space-around
在这里插入图片描述
justify-content: space-between

附上代码大家也可以自己试一试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta flex</title>
    <!--所有移动端必须加viewport(视口)-->
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1 /">
    <!--width=device-width：网业宽度等于设备宽度-->
    <!--user-scalable=no:禁止用户（双击，双指捏合）缩放-->
    <!--initial-scale=1:页面初始缩放比例（不缩放）-->
    <style>
        .box{
            width: 200px;
            height: 100px;
            border:1px red solid;
            display: flex;
            justify-content: space-between;// justify-content: space-around;
            align-items: center;
        }
        .part{
            width: 50px;
            height: 50px;
            background-color: palevioletred ;
            text-align: center;
            line-height: 50px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="part">box1</div>
        <div class="part">box2</div>
        <div class="part">box3</div>
    </div>
</body>
</html>

(2)align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
  /*flex-start：交叉轴的起点对齐。
	flex-end：交叉轴的终点对齐。
	center：交叉轴的中点对齐。
	baseline: 项目的第一行文字的基线对齐。
	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
}