利用Flexbox和Margin实现智能布局:如何巧妙分配剩余空间,让你的网页设计更上一层楼?

1、演示

2、flex布局

Flex布局是一种用于Web开发的弹性盒子布局模型,它可以让容器内的子元素在空间分配、对齐和排列方面具有更大的灵活性。以下是Flex布局的基本用法:

  1. 容器属性

    • display: flex;:将容器指定为Flex布局。
    • flex-direction:定义主轴的方向。可以是row(默认值,水平方向)、row-reverse(水平方向反向)、column(垂直方向)或column-reverse(垂直方向反向)。
    • flex-wrap:定义子元素如何换行。可以是nowrap(默认,不换行)、wrap(换行)、wrap-reverse(反向换行)。
    • justify-content:定义子元素在主轴上的对齐方式。可以是flex-start(默认,起点对齐)、flex-end(终点对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)、space-around(项目两侧的间隔相等,项目与项目之间的间隔是它们的间隔的一半)或space-evenly(项目之间的间隔相等)。
    • align-items:定义子元素在交叉轴上的对齐方式。可以是flex-start(起点对齐)、flex-end(终点对齐)、center(居中对齐)、baseline(基线对齐,以第一行文字的基线对齐)、stretch(默认,拉伸填充容器)。
    • align-content:定义多根轴线的对齐方式。只有一根轴线时不起作用。可以是flex-startflex-endcenterspace-betweenspace-aroundstretch(默认)。
  2. 项目属性

    • order:定义项目的排列顺序,默认为0,可以为负值。
    • flex-grow:定义项目的放大比例,默认为0,即即使存在剩余空间,也不放大。
    • flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,项目将缩小。
    • flex-basis:定义项目在主轴上的初始大小,默认为auto,即根据内容自动调整大小。
    • flex:是flex-growflex-shrinkflex-basis的简写,默认值为0 1 auto。可以设置为none(等同于0 0 auto)或auto(等同于1 1 auto)。
    • align-self:单独定义某个项目在交叉轴上的对齐方式,覆盖容器的align-items属性。

Flex布局非常适用于构建响应式网页布局,可以轻松实现各种复杂的排版效果,并且在移动端和PC端都有良好的兼容性。

4、margin

margin是CSS中用来设置元素外边距的属性,它控制着元素与周围元素之间的空间间隔。margin属性可以应用于所有HTML元素,其主要作用是控制元素之间的间距和布局。

以下是margin的基本用法:

  1. 设置单个方向的外边距

    • margin-top:设置元素的上外边距。
    • margin-right:设置元素的右外边距。
    • margin-bottom:设置元素的下外边距。
    • margin-left:设置元素的左外边距。
  2. 设置所有方向的外边距

    • margin:通过设置一个值,可以同时设置元素的上、右、下、左四个方向的外边距。例如,margin: 10px;表示上、右、下、左外边距都是10像素;或者可以分别指定四个方向的值,例如,margin: 10px 20px 15px 25px;分别表示上、右、下、左外边距的数值。
  3. 负外边距

    • 通过设置负数值的外边距,可以让元素在页面布局中产生重叠或调整位置的效果。
  4. 注意事项

    • 外边距会影响元素的宽度和高度,通常在进行布局设计时需要考虑外边距的影响。
    • 外边距会叠加(collapse),即当两个相邻元素的外边距重叠时,最终的外边距取两者中的最大值。

通过合理地运用margin属性,可以实现页面元素之间的间距调整和布局设计,从而达到更好的视觉效果和用户体验。

3、代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
      .container {
        width: 800px;
        border: 1px solid #266fff;
        background-color: #eee;
        padding: 10px;
        display: flex;
        margin-bottom: 10px;
      }
      .item {
        width: 50px;
        height: 50px;
        margin-left: 10px;
      }
      .item:nth-child(1) {
        margin-left: 0px;
        background-color: saddlebrown;
      }
      .item:nth-child(odd) {
        background-color: rgb(19, 139, 55);
      }
      .item:nth-child(even) {
        background-color: rgb(214, 246, 6);
      }
      .container5 {
        flex-wrap: wrap;
      }
      .container5 .item {
        --n: 7;
        --space: calc(100% - var(--n) * 50px);
        --h: calc(var(--space) / var(--n) / 2);
        margin: 10px var(--h);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item" style="margin: auto"></div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item" style="margin-left: auto"></div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item" style="margin-left: auto"></div>
      <div class="item"></div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item" style="margin: auto"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="container container5">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/533373.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

头歌-机器学习 第9次实验 随机森林

第1关&#xff1a;Bagging 任务描述 本关任务&#xff1a;补充 python 代码&#xff0c;完成 BaggingClassifier 类中的 fit 和 predict 函数。请不要修改 Begin-End 段之外的代码。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 什么是 Bagging&#xf…

【IC前端虚拟项目】验证阶段开篇与知识预储备

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 从这篇开始进入验证阶段&#xff0c;因为很多转方向的小伙伴是转入芯片验证工程师方向的&#xff0c;所以有必要先做一个知识预储备的说明&#xff0c;或者作为验证入门的一个小指导吧。 在最开始&#…

C++11 设计模式1. 模板方法(Template Method)模式学习。UML图

一 什么是 "模板方法&#xff08;Template Method&#xff09;模式" 在固定步骤确定的情况下&#xff0c;通过多态机制在多个子类中对每个步骤的细节进行差异化实现&#xff0c;这就是模板方法模式能够达到的效果。 模板方法模式属于&#xff1a;行为型模式。 二 &…

vivado 调试核时钟设置指南

调试核时钟设置指南 注释 &#xff1a; 以下章节适用于 7 系列、 UltraScale 和 UltraScale 器件。 Versal 调试核使用基于 AXI 的连接 &#xff0c; 且不受本章中的 时钟设置指南的约束。 Vivado 硬件管理器使用 JTAG 接口来与 Vivado Debug Hub 核进行通信 &#…

Spring Boot统一功能处理之拦截器

本篇主要介绍Spring Boot的统一功能处理中的拦截器。 目录 一、拦截器的基本使用 二、拦截器实操 三、浅尝源码 初始化DispatcherServerlet 处理请求&#xff08;doDispatch) 四、适配器模式 一、拦截器的基本使用 在一般的学校或者社区门口&#xff0c;通常会安排几个…

Linux查看系统配置信息的命令【lscpu】【free】【df】【uname】【lsblk】【top】

目录 1.查看CPU信息【lscpu】 2.查看内存信息【free】 3.查看文件系统信息【df】 4.查看系统信息【uname】 知识扩展&#xff1a;Red Hat Enterprise Linux 和 Debian GNU/Linux 两者的发展介绍 知识扩展&#xff1a;Centos 和 ubuntu的区别 知识扩展&#xff1a;更多 …

Navicat的详细下载步骤

第一步&#xff0c;打开百度&#xff0c;找到Navicat官网 第二步&#xff0c;点击产品然后进去 第三步&#xff0c;点击直接下载然后跟着步骤来就OK啦

idm线程越多越好吗 idm线程数多少合适 IDM百度云下载 IDM下载器如何修改线程数

IDM&#xff08;Internet Download Manager&#xff09;是一款流行的网络下载器&#xff0c;它支持多线程下载&#xff0c;这意味着它可以同时建立多个连接来下载文件的不同部分&#xff0c;从而提高下载速度。我们在使用IDM的时候总是有很多疑问&#xff0c;今天我们学习IDM线…

免费搭建MC服务器(Minecraft免费开服教程)

我的世界(MC)作为一款全球热门的沙盒游戏&#xff0c;以其独特的创造性和无限的想象力&#xff0c;吸引了无数玩家。自行搭建MC服务器能够获得更好的游戏体验&#xff0c;本文将为大家介绍如何免费搭建MC服务器&#xff0c;开启一段属于自己的游戏世界之旅。 搭建MC服务器我们需…

ES11-12

1-ES11-Promise.allSettled Promise.allSettled0)方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果。 简单来说不管成功失败都会调用.then()&#xff0c;然后处理成功和失败的结果 const promises [ …

头歌机器学习实验 第7次实验 局部加权线性回归

任务描述 本关任务&#xff1a;编写一个利用局部加权计算回归系数的小程序。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.局部加权算法的思想&#xff1b;2.局部加权的核心算法。 局部加权算法的思想 在局部加权算法中 &#xff0c;我们给待预测点附近…

数字社交的新典范:解析Facebook的成功密码

在当今数字化时代&#xff0c;社交媒体已经成为人们日常生活的重要组成部分&#xff0c;而Facebook作为最知名的社交媒体平台之一&#xff0c;其成功之处备受瞩目。本文将深入解析Facebook的成功密码&#xff0c;探讨其在数字社交领域的新典范。 1. 用户体验的优化 Facebook注…

SpringBoot删除菜品模块开发(SpringMVC分割参数、事务管理、异常处理、批量删除)

需求分析与设计 一&#xff1a;产品原型 在菜品列表页面&#xff0c;每个菜品后面对应的操作分别为修改、删除、停售&#xff0c;可通过删除功能完成对菜品及相关的数据进行删除。 删除菜品原型&#xff1a; 业务规则&#xff1a; 可以一次删除一个菜品&#xff0c;也可以批…

NzN的数据结构--选择排序

接上文&#xff0c;本章我们来介绍选择排序。先三连后看才是好习惯~~~ 目录 一、基本思想 二、直接选择排序 三、堆排序 一、基本思想 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待…

2024/4/6—力扣—简化路径

代码实现&#xff1a; // 分割/得到名字 char **split(const char *s, int *returnSize) {int n strlen(s);char **ans (char **)malloc(sizeof(char *) * n);int l 0, r 0, len 0;while (r < n) {while (r < n && s[r] /) {r;}l r;while (r < n &…

报修小程序怎么建立?维修服务行业的智能化升级

在这个数字化飞速发展的时代&#xff0c;维修服务行业也在经历着前所未有的变革。消费者对于服务的期待不再局限于传统的电话预约或线下等待&#xff0c;而是希望能够通过更加智能、便捷的途径解决日常生活中的维修问题。在这样的背景下&#xff0c;报修小程序应运而生&#xf…

跟TED演讲学英文:A new way to build AI, openly by Percy Liang

A new way to build AI, openly Link: https://www.ted.com/talks/percy_liang_a_new_way_to_build_ai_openly? Speaker: Percy Liang Date: October 2023 文章目录 A new way to build AI, openlyIntroductionVocabularyTranscriptSummary后记 Introduction Today’s AI …

STM32F4 IAP跳转APP问题及STM32基于Ymodem协议IAP升级笔记

STM32F4 IAP 跳转 APP问题 ST官网IAP例程Chapter1 STM32F4 IAP 跳转 APP问题1. 概念2. 程序2.1 Bootloader 程序 问题现象2.2. APP程序 3. 代码4. 其他问题 Chapter2 STM32-IAP基本原理及应用 | ICP、IAP程序下载流程 | 程序执行流程 | 配置IAP到STM32F4xxxChapter3 STM32基于Y…

信息系统项目管理师——第5章信息系统工程(三)

近几期的考情来看&#xff0c;本章选择题稳定考4分&#xff0c;考案例的可能性有&#xff0c;需要重点学习。本章节专业知识点特别多。但是&#xff0c;只考课本原话&#xff0c;大家一定要把本章至少通读一遍&#xff0c;还要多刷题&#xff0c;巩固重点知识。 3 系统集成 3…

Qt5 编译 Qt Creator 源码中的 linguist 模块

文章目录 下载 Qt Creator 源码手动翻译多语言自动翻译多语言 下载 Qt Creator 源码 Github: https://github.com/qt/qttools 笔记打算用 Qt 5.12.12 来编译 qt creator-linguist 所以笔者下载的是 tag - 5.12.12 &#xff0c;解压后如下&#xff0c;先删除多余的文件&#xf…