Flex弹性布局

最新推荐文章于 2024-09-05 01:30:55 发布

焦妮敲代码

最新推荐文章于 2024-09-05 01:30:55 发布

阅读量567

点赞数 1

分类专栏： # html+css 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_45890970/article/details/123379652

版权

html+css 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

移动Web学习

1. 必备基础知识
2. Flex布局

1. 必备基础知识

屏幕大小

我们常说的屏幕尺寸，指的是屏幕对角线的长度，一般用英寸来度量。

在这里插入图片描述

分辨率

1.屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

屏幕分辨率是指纵横向上的像素点数，单位是px。就相同大小的屏幕而言，

当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。
屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。

2.分辨率分类

物理分辨率	逻辑分辨率
物理分辨率是生产屏幕时就固定的，它是不可被改变的。一般来讲物理分辨率的大小可直接决定屏幕的最高分辨率，分辨率不会大于物理分辨率。	由软件（驱动）决定的

这是我电脑的显示设置，电脑的物理分辨率为1920*1080。由于我放大成了1.5倍，所以逻辑分辨率不等于物理分辨率，变成了（1920/150%）*（1080/150%）
在这里插入图片描述
了解移动端主流设备分辨率

注意：制作网页参考逻辑分辨率！！！

视口标签

该行代码表示：虽然手机屏幕尺寸不相同时， 但视口宽度为设备宽度。 网页的宽度和设备逻辑分辨率尺寸相同。

initial-scale=1.0：缩放1倍（不缩放）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

注意：若没有这行代码，移动端默认网页宽度是980px。

二倍图

虽然我们制作网页参考的是逻辑分辨率，但是我们得到的设计图一般是物理分辨率大小的设计图，就是我们所说的二倍图。为什么要使用二倍图呢？因为当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。
在这里插入图片描述

百分比布局

1.百分比布局，也叫流式布局

2.效果：宽度自适应，高度固定。即宽度设置100%，高度设置为固定像素。

2. Flex布局

1.含义

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

2.作用

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。 Flex布局非常适合结构化布局。

3.设置方式：给父元素添加 display: flex，子元素可以自动的挤压或拉伸。

4.组成部分：父元素称为弹性容器，子元素称为弹性盒子。还包括：

主轴
侧轴 / 交叉轴

主轴对齐方式（justify-content）

使用justify-content调节元素在主轴的对齐方式
在这里插入图片描述

.box {
    display: flex;

    /* 居中 */
    /* justify-content: center; */

    /* 间距在弹性盒子(子级)之间 */
    /* justify-content: space-between; */

    /* 所有地方的间距都相等 */
    /* justify-content: space-evenly; */

    /* 间距加在子级的两侧 */
    /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
    justify-content: space-around;
    
    height: 200px;
    margin: auto;
    border: 1px solid #000;
}

侧轴对齐方式（align-items）

使用align-items调节元素在侧轴的对齐方式

align-items：添加到弹性容器
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

注意：若弹性盒子有高度，则stretch不生效。

伸缩比（flex:整数值）

flex:整数值，表示占用父盒子剩余尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }

        .box div:nth-child(1) {
            width: 50px;
        }

        .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 3;
        }

        .box div:nth-child(3) {
            flex: 1;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述

主轴方向（flex-direction）

主轴默认是水平方向, 侧轴默认是垂直方向。

修改主轴方向属性: flex-direction
在这里插入图片描述
注意：flex-direction取值为column的时候，主轴变为垂直方向，侧轴会变为水平方向。

弹性盒子换行（flex-wrap）

默认情况下，所有的弹性盒子都会沿着弹性容器主轴对齐。如果弹性容器的主轴宽度不够，那么弹性盒子的宽度会被自动减少，也就是说不会和float一样自动换行显示。

例如我有八个盒子，每个width: 100px;、 height: 100px;，但是弹性容器只有375。那么弹性盒子的尺寸会变小
在这里插入图片描述
要想让弹性盒子换行显示，需要给弹性容器添加 flex-wrap: wrap;

/* 默认值, 不换行 */
/*flex-wrap: nowrap;*/

/* 弹性盒子换行 */
flex-wrap: wrap;

在这里插入图片描述
换行后，行有默认的对齐方式align-content: normal;。调整行对齐方式：align-content，取值与justify-content基本相同

align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end;   /* 从终止点开始放置flex元素 */

/* 默认对齐 */
align-content: normal;

/* 分布式对齐 */
align-content: space-between; /* 第一项与起始点齐平，最后一项与终止点齐平 */
align-content: space-around;  /* 项目在两端有一半大小的空间*/
align-content: space-evenly;  /* 均匀分布项目 项目周围有相等的空间 */