前端必知必会-CSS响应式 Flexbox

最新推荐文章于 2024-11-18 08:41:09 发布
最新推荐文章于 2024-11-18 08:41:09 发布
阅读量786 收藏 12
点赞数 24
分类专栏： 前端必知必会 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24018193/article/details/141934645
版权

文章目录

CSS 响应式 Flexbox

可以使用媒体查询为不同的屏幕尺寸和设备创建不同的布局。
在这里插入图片描述

例如，如果您想为大多数屏幕尺寸创建两列布局，为小屏幕尺寸（如手机和平板电脑）创建一列布局，则可以在特定断点（以下示例中为 800px）处将 flex-direction 从行更改为列：

示例

.flex-container {
display: flex;
flex-direction: row;
}

/* 响应式布局 - 创建一列布局而不是两列布局 */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}

另一种方法是更改​​弹性项目的弹性属性百分比，以针对不同的屏幕尺寸创建不同的布局。请注意，我们还必须在弹性容器中包含 flex-wrap: wrap; 以使此示例正常工作：

示例

.flex-container {
display: flex;
flex-wrap: wrap;
}

.flex-item-left {
flex: 50%;
}

.flex-item-right {
flex: 50%;
}

/* 响应式布局 - 制作一列布局而不是两列布局 */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}

使用 Flexbox 的响应式图库

在这里插入图片描述

使用 Flexbox 创建一个响应式图库，其中包含四张、两张或全宽图像，具体取决于屏幕尺寸：

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Gallery</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="wedding.jpg" style="width:100%">
    <img src="rocks.jpg" style="width:100%">
    <img src="falls2.jpg" style="width:100%">
    <img src="paris.jpg" style="width:100%">
    <img src="nature.jpg" style="width:100%">
    <img src="mist.jpg" style="width:100%">
    <img src="paris.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="underwater.jpg" style="width:100%">
    <img src="ocean.jpg" style="width:100%">
    <img src="wedding.jpg" style="width:100%">
    <img src="mountainskies.jpg" style="width:100%">
    <img src="rocks.jpg" style="width:100%">
    <img src="underwater.jpg" style="width:100%">
  </div> 
   
  <div class="column">
    <img src="wedding.jpg" style="width:100%">
    <img src="rocks.jpg" style="width:100%">
    <img src="falls2.jpg" style="width:100%">
    <img src="paris.jpg" style="width:100%">
    <img src="nature.jpg" style="width:100%">
    <img src="mist.jpg" style="width:100%">
    <img src="paris.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="underwater.jpg" style="width:100%">
    <img src="ocean.jpg" style="width:100%">
    <img src="wedding.jpg" style="width:100%">
    <img src="mountainskies.jpg" style="width:100%">
    <img src="rocks.jpg" style="width:100%">
    <img src="underwater.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

使用 Flexbox 的响应式网站

在这里插入图片描述

使用 Flexbox 创建一个响应式网站，其中包含灵活的导航栏和灵活的内容：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

总结

本文介绍了CSS响应式 Flexbox的使用，如有问题欢迎私信和评论

编程岁月
关注
专栏目录
Cafe-html-css:该项目的目标是仅在HTML-CSS中创建页面，而不使用Flexbox和网格
04-11
因此，他们需要掌握响应式设计的基本原理，利用媒体查询（media queries）来确保页面在各种设备上都能良好展示。 总的来说，“Cafe-html-css”项目是对传统HTML-CSS技能的一次实践和检验，它强调了基础布局技术的...
前端面试题 必看--
01-18
这里我们聚焦于"前端面试题 必看"这一主题，深入探讨一些常见的前端面试知识点，帮助求职者做好充分准备。 1. HTML基础知识： - 语义化标签：理解并能正确使用`<header>`, `<footer>`, `<nav>`, `<article>`等语义...
CSS布局之Flex-box弹性盒子布局详解
m0_75116965的博客
07-30 1691
详细介绍Flex-box弹性盒子布局的整体属性用法
前端必知必会-CSS网站布局
qq_24018193的博客
08-27 2488
文章目录CSS 网站布局页眉导航栏内容不等列页脚响应式网站布局总结 CSS 网站布局 网站布局 网站通常分为页眉、菜单、内容和页脚： 有大量不同的布局设计可供选择。但是，上面的结构是最常见的结构之一 页眉 页眉通常位于网站顶部（或顶部导航菜单正下方）。它通常包含徽标或网站名称： 示例 .header { background-color: #F1F1F1; text-align: center; padding: 20px; } 结果 导航栏 导航栏包含链接列表，可帮助访问者浏览您的网站： 示例 /
前端必知必会-CSS媒体查询范例
qq_24018193的博客
09-11 804
本文介绍了CSS媒体查询范例，如有问题欢迎私信和评论。
前端必知必会-CSS Flex布局
qq_24018193的博客
09-12 2058
本文介绍了CSS Flex布局的使用，如有问题欢迎私信和评论。
前端必知必会-html的div和class
qq_24018193的博客
07-26 1822
本文介绍了的html的css使用，如有问题欢迎私信和评论。
前端基础 - css布局回顾
zhqi9277的博客
07-20 96
CSS布局是前端开发中至关重要的知识体系。它涉及到页面中元素的排列和定位，直接影响到用户界面的呈现和用户体验。随着Web技术的不断发展，布局方法也在不断演进。本文将对CSS布局的历史演进、常用布局方法、盒模型与元素定位、CSS布局技巧、响应式设计和主流网站的布局实践进行探讨。
浏览器兼容性问题：前端开发者必备的解决技巧
官方推荐
08-31 7858
浏览器兼容性问题：前端开发者必备的解决技巧
如何创建响应式前端表单？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-19 1137
在现代Web开发中，响应式设计是必不可少的一部分，尤其是当涉及到表单元素时。通过本文的学习，你应该能够创建出既美观又实用的响应式前端表单。在实际项目中应用这些技巧，并不断迭代改进，你的表单设计将更加出色，为用户提供卓越的体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。Flexbox虽然强大，但Grid布局提供了更灵活的网格布局选项，特别适合复杂的表单设计。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，
如何用一简单的CSS制作响应式HTML网页
热门推荐
hzp666的博客
12-12 2万+
如何用简单的CSS制作响应式HTML网页#故事前端开发在这篇文章中，我将教你如何使用CSS网格来创建一个超级酷的图像网格，它随着屏幕的宽度而改变列的数量。最赞的一点就是：这个响应式效果只需要添加一行CSS。这意味着我们不必给HTML取很乱的类名（即col-sm-4，col-md-8），或者为每一个屏幕大小创建媒体查询。现在让我们开始吧！设置对于本文，我们将继续使用我们在第一篇CSS Grid文章中...
Web-前端html+css从入门到精通 208. 响应式布局之两种操作模式.zip
05-23
总的来说，理解和掌握响应式布局的两种主要操作模式——Media Queries和Flexbox，是前端开发者必备的技能。通过实践和不断学习，你可以创建出既美观又实用的跨平台网站，无论用户使用何种设备，都能提供一致且优质的...
第4章 前端面试技能拼图2 ：前端基础知识 ， 必知必会
03-13
本章“第4章 前端面试技能拼图2：前端基础知识，必知必会”将深入探讨那些面试官常问且开发者必须掌握的核心概念。 1. HTML（超文本标记语言）： HTML是网页内容的结构标准，是前端开发的基石。理解不同标签的作用...
前端面试必备：HTML-CSS-JS全解析与性能优化技巧
4. div+css布局优势 - div+css布局提供更大的灵活性，易于维护和响应式设计，避免了table布局的一些限制。 5. HTML标签的区别 - img的alt提供替代文本，适合屏幕阅读器和搜索引擎抓取；title提供悬停提示，增加交互...
前端（1）——快速入门HTML
m0_63086198的博客
11-14 970
参考： W3school 1. HTML 我使用的是vs code，在使用之前，先安装以下几个插件： Auto Rename Tage HTML CSS Support Live Server 1.1 HTML标签 HTML全称是Hypertext Markup Language(超文本标记语言) HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键 字。 标签通常成对出现，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如
w042基于web的IT技术交流和分享平台的设计与实现
最新发布
卓怡工作室的博客
11-18 739
我国科学技术的不断发展，计算机的应用日渐成熟，其强大的功能给人们留下深刻的印象，它已经应用到了人类社会的各个层次的领域，发挥着重要的不可替换的作用。信息管理作为计算机应用的一部分，使用计算机进行管理，具有非常明显的优点，利用网络的优势特开发了本基于SpringBoot的IT技术交流和分享平台。 本IT技术交流和分享平台是基于SpringBoot框架，采用Java技术，MYSQL数据库进行开发的。系统具有灵活的一体化设计方式，圆满完成了整个系统的界面设计。本系统实现了用户功能模块和管理员功能模块两大部分，
后端一次性返回数据，前端分页
qq_39307266的博客
11-14 406
vue 结合elementUI 分页组件，后端一次性返回数据，前端做分页。1.template中。js从后端获取总数据。
前端文件优化
weixin_62668406的博客
11-15 719
对于一张100*100像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字 节），所以该图⽚⼤⼩⼤概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项⽬中，⼀张图⽚可能并不需要使⽤那么多颜⾊去显示，我们可以通过减少每个 像素的调⾊板来相应缩⼩图⽚的⼤⼩。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程岁月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值