CSS flex布局 - 响应式设计 - 定位_flex响应式布局-CSDN博客

本文链接：https://blog.csdn.net/m0_61698324/article/details/135014144

本文详细介绍了CSSFlexbox的各种属性，包括主轴和侧轴方向、对齐方式、flex-flow的复合属性，以及如何使用flex实现水平垂直居中。同时涵盖了响应式设计的概念和实现方法，如媒体查询的使用。最后讨论了静态、相对和绝对定位的基本原理。

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

- 盒模型

🐇主轴方向

在这里插入图片描述

🐇主轴换行方式

在这里插入图片描述

🐇flex-flow

复合了flex-direction 和 flex-wrap两个属性。值没有顺序要求。

flex-flow: row wrap;

🐇主轴对齐方式 justify-content

flex-start：主轴起点对齐。默认值
flex-end：主轴终点对齐
center：居中
space-between：均匀分布，头尾紧挨，两端对齐。
space-around：均匀分布，两端距离是中间一半
space-evenly：均匀分布，两端距离与中间距离一致

在这里插入图片描述

🐇侧轴对齐方式（单行） align-items

flex-start：侧轴起点对齐。
flex-end：侧轴终点对齐
center：居中
baseline：第一行文字的基线对齐
stretch：如为设置高度，将占满整个容器高度。默认值

在这里插入图片描述

🐇侧轴对齐方式（多行）align-items

flex-start：侧轴起点对齐。
flex-end：侧轴终点对齐
center：居中
space-between：与侧轴两端对齐，中间平均分布。
space-around：盒子间的距离相等，比距边缘大一倍
space-evenly：在侧轴上完全平分。
stretch：占满整个侧轴。默认值

在这里插入图片描述

🐇flex实现水平垂直居中

方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中

.outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
}

方法二：父容器开启 flex 布局，随后子元素 margin: auto

.outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
	margin: auto;
}

🐇伸缩性

在这里插入图片描述

🐇flex复合属性

在这里插入图片描述

响应式布局

🐇什么是响应式设计？

是一种网络设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。（同时适配PC + 平板 + 手机等）

🐇实现方式：

百分比（不推荐使用）

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
- wihth、height 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素
- 子元素的top/left和bottom/right如果设置百分比，则相对于直接非 static 定位（默认定位）父元素的高度/宽度
- 子元素的 padding 如果设置百分比，不论垂直方向或者水平方向，都相对于直接父元素的width，而与父元素的height无关
- 子元素的 margin 如果设置百分比，不论垂直方向还是水平方向，都相对于父元素的width
- -border-radius 不一样，如果设置 border-radius 为百分比，则是相对于自身的高度
- 可以看到每个属性都使用百分比，会造成布局的复杂度，所有不建议使用百分比来实现响应式
vh / vw
- vw：表示相对于视图窗口的宽度。
- vh：表示相对于视图窗口高度。
- 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一
rem
- rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px
- 非根元素设置width:2rem;则换成px表示就是24px
- 可以通过修改HTML中size的大小，改变页面中所有元素的大小。
媒体查询

@media type and|not|only(media feature) {
	css-code;
}
/*and:可以将多个媒体特性连接到一起，相当于“且”的意思。 not:排除某个媒体类型，相当于“非”的意思，可以省略。 only:指定某个特定的媒体类型，可以省略。*/

在这里插入图片描述

h1 {
    width: 600px;
    height: 400px;
    line-height: 400px;
    background-image: linear-gradient(30deg,red,yellow,green);
    margin: 0 auto;
    text-align: center;
    font-size: 100px;
    color: white;
    text-shadow: 0 0 10px black;
}
/* 只有在打印机或打印预览才应用的样式 */
@media print {
    h1 {
        background: transparent;
    }
}
/* 只有在屏幕上才应用的样式 */
@media screen {
    h1 {
        font-family: "翩翩体-简";
    }
}
/* 一直都应用的样式 */
@media all {
    h1 {
        color: red;
    }
}

在这里插入图片描述

<header class="msg_header">
        <div class="logo_left">
            <a href="#">深圳大学海外留学校区</a>
        </div>
        <div class="right_choose">
            <span><a href="#">国内校区</a></span>
            <span><a href="#">澳洲校区</a></span>
            <span><a href="#">英国校区</a></span>
            <span><a href="#">美国校区</a></span>
        </div>
    </header>
    <div class="content">
        <div class="box1">
            我的邮箱</div>
        <div class="box1"> 手机课堂</div>
        <div class="box1">云服务</div>
        <div class="box1">微信服务</div>
        <div class="box1">在线客服</div>
    </div>

*{
    margin: 0;
}
.msg_header{
    display: flex;
    height: 4.5rem;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(84, 86, 88);
    padding: 0 10px;
    color: white;
}
.msg_header a{
    color: white;
    text-decoration: none;
}
.logo_left{
    display: flex;
    align-items: center;
}
.logo_left .icon{
    height: 3rem;
    width: 4rem;
}
.right_choose span{
    padding: 4px 5px;
    border: 1px solid white;
    border-radius: 3px;
}
body{
    height: 100vh;
    background-image: url('https://img1.baidu.com/it/u=1646831853,4240794628&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400');
    background-repeat: no-repeat;
    background-size: cover;
}
.content{
    height: calc(100vh - 4.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box1{
    height: 12rem;
    width: 10rem;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin-left: 10px;
    font-size: 22px;
    color: white;
    cursor: pointer;
    transition: 0.2s linear;
}
.box1:hover{
    box-shadow: 0px 0px 20px rgb(240, 233, 233);
}

.content .box1:nth-child(1){
    margin-left: 0;
    background-color: rgb(165, 148, 211);
}
.content .box1:nth-child(2){
    background-color: rgb(238, 210, 118);
}
.content .box1:nth-child(3){
    background-color: rgb(127, 187, 221);
}
.content .box1:nth-child(4){
    background-color: rgb(61, 70, 155);
}
.content .box1:nth-child(5){
    background-color: rgb(61, 155, 74);
}
.box1 .icon{
    height: 3rem;
    width: 4rem;
    /* margin-bottom: 10px; */
}

/* 检测到视口的宽度为800px时，应用如下样式 */
@media (min-width:900px) {
    .msg_header{
        background-color: green;
    }
}
/* 检测到视口的宽度小于等于700px时，应用如下样式 */
@media (max-width:900px) {
    .msg_header{
        background-color: orange;
    }
}
/* 检测到视口的宽度大于等于900px时，应用如下样式 */
@media (min-width:1200px) {
    .msg_header{
        background-color: rgb(84, 86, 88);
    }
}

定位

🐇 静态定位（static）：

静态定位（static）是默认的定位方式，它完全按照HTML文档流进行布局。我们没有必要为元素设置静态定位，因为它是默认的

🐇 相对定位（relative）：

相对定位（relative）是相对于元素的初始位置进行定位的。也就是说，如果您让一个元素相对于它自己的初始位置定位，那么它将会移动相应的距离。

<div class="box">
        <p>这是一个 div 元素。</p>
        <p class="inner">这是一个内部元素。</p>
    </div>

.box {
       background: #ccc;
       padding: 20px;
   }

.inner {
        position: relative;
        left: 30px;
        top: 20px;
   }

🐇 绝对定位（absolute）：

绝对定位需要参照物，如果没有父元素的 position 属性为非 static 值，那么元素将会相对于 body 元素进行定位。

<div class="container">
        <div class="box">
            <p>这是一个 div 元素。</p>
            <p class="inner">这是一个内部元素。</p>
        </div>
    </div>

.container {
            position: relative;
        }
        .box {
            background: #ccc;
            padding: 20px;
        }
        .inner {
            position: absolute;
            right: 30px;
            bottom: 20px;
        }