移动端flex

qq_40832034

已于 2023-02-20 13:21:04 修改

阅读量138

点赞数

文章标签： css css3 html

于 2022-05-21 16:57:51 首次发布

本文链接：https://blog.csdn.net/qq_40832034/article/details/124732227

版权

前端学习专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一、移动端特点

1、移动端和PC端网页不同点

PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

2、谷歌模拟器

在电脑里面边写代码边调试移动端网页效果：谷歌模拟器

3、分辨率

分辨率分类
物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的

制作网页参考逻辑分辨率

移动端主流设备分辨率

4、视口

默认情况下，网页的宽度和逻辑分辨率不一样，为了让其一样，添加视口标签
在这里插入图片描述
html中!后格式自动有了，不用另外写。

5、二倍图

为了高分辨率下图片不会模糊失真
在这里插入图片描述

二、百分比布局

百分比布局，也叫流式布局
效果：宽度自适应，高度固定。

三、Flex布局

1、Flex布局

浮动中存在脱标问题

Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

Flex存在兼容性问题，可以到caniuse网站查看元素的浏览器兼容性

设置方式
** 父元素**添加 display: flex，子元素可以自动的挤压或拉伸
（沿着主轴默认排放，一般主轴水平，则水平排放）
组成部分
弹性容器
弹性盒子
主轴
侧轴 / 交叉轴

 <style>
        .box{
            display: flex;
            width: 200px;
            height: 200px;
            border: 2px solid #000;
        }
        .box div{
            width: 60px;
            height: 60px;
            background-color: pink;
        }
    </style>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

在这里插入图片描述

2、设置盒子之间的距离（通过调节主轴或侧轴的对齐方式）

使用justify-content调节元素在主轴的对齐方式
使用align-items调节元素在侧轴的对齐方式
align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

注意
① 弹性布局一定是在父子元素间的，要给父元素添加flex，还可以设置对齐方式
② 弹性盒子尺寸特点：侧轴对齐中，子元素不设置高度默认为stretch,（stretch父盒子的高度。）有高度就默认start。
如果又有stretch又有别的，高度按照设置的高度走，没有设置的高度按照内容撑开的高度。

3、使用flex属性修改弹性盒子伸缩比

属性
flex : 值;
取值分类
数值(整数)

注意 : 只占用父盒子剩余尺寸

<style>
        .box{
            display: flex;
           
            width: 200px;
            height: 200px;
            border: 2px solid #000;
        }
        .box div{
            width: 60px;
            height: 60px;
            background-color: pink;
            border:1px solid #000;
        }
        /* 1已经占用了60px，剩下的2分为4份，2占3份，3占1份 */
        .box div:nth-child(2){
            flex: 3;
        }
        .box div:nth-child(3){
            flex: 1;
        }
    </style>

在这里插入图片描述

4、使用flex-direction改变元素排列方向

主轴默认是水平方向，想改成垂直方向：flex-direction

在这里插入图片描述

注意：
切换主轴后，主轴方向与侧轴方向的对齐标签也需要跟着换，现在水平方向是侧轴，居中用align-items

5、使用flex-wrap实现弹性盒子多行排列效果

想实现多个盒子换行排；
如果仅仅使用display:flex; 弹性布局为了一行装下很多个盒子会挤压宽度；
为了实现这种效果：使用flex-wrap:wrap;，默认是nowrap.
在这里插入图片描述

6、调整多行排列中的行对齐方式：align-content

为了解决换行后行间距问题，如下图
取值与justify-content基本相同

在这里插入图片描述

四、案例–小兔鲜儿确认订单

1、项目结构

![在这里插入图片描述](https://img-blog.csdnimg.cn/be1e35643e0145c5a3f38b9c485d24e8.png

lib用来存放外部包如iconfont

五、案例–小兔鲜儿pc端个人中心

1、flex布局中的单行超过则省略

在这里插入图片描述
关于不溢出的之前的方法：

/*超出部分隐藏*/
overflow:hidden;

/*ellipsis:当对象内文本溢出时显示省略标记(...)，不过需要overflow、white-space属性配合*/
text-overflow: ellipsis;

/*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
white-space: nowrap;

但是存在问题：弹性盒子为了不让溢出，只会选择缩小内容放下全部内容
改进：给text添加

 flex: 1;
 width: 0;

其中flex:1是为了让文本text模块占用除去图片的剩下所有区域，
width:0是为了让超出文本省略显示

在这里插入图片描述
(图片是pic块，所有文字是text块)

 <div class="wu">
      <div class="pic">
          <a href="#"><img src="./uploads/order_goods_1.jpg" alt=""></a>
      </div>
      <div class="text">
          <h5>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</h5>
          <p>颜色：<span>白色</span>  尺码：<span> M </span> 数量：<span>1</span></p>
      </div>
</div>

.orders ul li .wu{
    display: flex;
    align-items: center;
    margin-right: 128px;
    
    flex: 1;
}
.orders ul li .wu .pic{
    margin: 17px 5px 14px 12px;
    width: 107px;
    height: 107px;
}
.orders ul li .wu .text{
    flex: 1;
    width: 0;
}
.orders ul li .wu .text h5{
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    /* 为了让超出文本显示省略 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.orders ul li .wu .text p{
    font-size: 14px;
    color: #999999;
}