首页 > 其他分享 >Flex布局-margin 妙用技巧

Flex布局-margin 妙用技巧

时间:2024-05-18 20:10:42浏览次数:25  
标签:Flex flex color auto 妙用 background main margin

flex 布局 中, 通过对子项设置 margin-auto; 的方式去吃掉剩余空间, 这种小技巧在很多时候能极大简化我们的布局哦.

单元素水平垂直居中

如果父容器是 flex, 要实现元素水平垂直居中, 直接在容器项添加:

display: flex;

justify-content: center;
align-items: center;

但其实我们可以直接给子项添加 margin: auto; 就搞定啦!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex + margin</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      background-color: #ccc;
      display: flex;
    }

    .main div {
      width: 100px;
      height: 100px;
      background-color: pink;

      /* 水平垂直居中 */
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="main">
    <div></div>
  </div>
</body>
</html>

原理就是通过子项的 margin 去占满它 top / right / bottom / left 的空间. 四个方向都能设置, 那对齐方式就自由控制四个方向啦.

某些项靠右对齐

初始是这样的:

a, b, c

现在想要将 c 挤压到最右边去:

a, b,             c

道理是一样的, 直接在子项中给 c 设置 margin-left: right 就搞定.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex + margin</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      background-color: #ccc;
      display: flex;
    }

    .main div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .move {
      margin-left: auto;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>a</div>
    <div>b</div>
    <div class="move">c</div>
  </div>
</body>
</html>

同理, 如果是要移动两个到右边也是一样的操作, 给 b 盒子设置上 margin-left: auto 即可.

a            b, c

同理, 如果是要实现这样的效果, 也是直接找出 c 盒子, 左右 margin: auto; 就搞定.

ab          c       d
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex + margin</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      background-color: #ccc;
      display: flex;
    }

    .main div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .move {
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>a</div>
    <div>b</div>
    <div class="move">c</div>
    <div>d</div>
  </div>
</body>
</html>

列表布局

子元素横向排列, 可以控制每行排列几个元素, 当排不下时, 自动换行.

就有点像二维布局了, 但这里我们不用 grid. 就非要用 flex 技巧.

如果在父容器上进行操作,

display: flex;

flex-wrap: wrap;
justify-content: space-between;

这样肯定是不行的, 不仅不能控制每一行的元素个数, 且最后一行的排列必定出问题哦.

但还是可以在子项设置 margin, 不过这里要给 margin 固定值哈, 类似设置这样就好:

.main div {
    background-color: pink;
    
    width: 30px;
    height: 40px;
    margin: 15px 20px;
}

假设我们现在每行要排列 7个盒子, 且知道每个盒子的宽度是定值 30px, 则剩余空间为父容器的宽度 100% 减去盒子宽度 乘7即可.

剩余宽度 = 100% - 盒宽 * 7 
每个盒子的左右 margin 为:  剩余宽度 / 7 / 2
/* 每个盒子的左右 margin 为:  剩余宽度 / 7 / 2 */
margin: 10px calc((100% - 30px * 7) / 7 / 2); 

最后可将每行排列几个设置为变量即可, 主要应用于页面做响应式的场景.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex + margin</title>
  <style>
    .main {
      width: 500px;
      height: 300px;
      background-color: #ccc;
      display: flex;
      /* 允许元素换行, 并设置交叉轴, 从起点开始放置元素 */
      flex-wrap: wrap; 
      align-content: flex-start; 
    }

    .main div {
      width: 40px;
      height: 40px;
      background-color: pink;

      /* --n: 7; */
      /* --n: 10; */
      --n: 6;
      --gap: calc((100% - 40px * var(--n)) / var(--n) / 2);
      margin: 10px var(--gap); 
    }

  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
  </div>
</body>
</html>

通过变量来动态计算 margin, 不仅是每行可以控制几个元素排列, 盒子大小也可以做变量, 就很强大哦!

实际项目中熟练应用这几个小技巧, 就已经很够用了. 尤其是左右布局的时候, margin-left: auto; 简直是一个神来之笔呢.

标签:Flex,flex,color,auto,妙用,background,main,margin
From: https://www.cnblogs.com/chenjieyouge/p/18199701

相关文章

  • Flex布局-子项
    弹性盒子是一种用于按行或按列的一维布局方法.元素可以膨胀以填充额外的空间,也可以收缩以适应更小的空间.flex容器项重点只是用表格进行排版而已,横向内容无关联哈,只是简要回忆一些前置知识.重点常用布局flex-direction内联和块的水平垂直居中布局f......
  • flex布局文本居中,文本溢出自动换行的方法
    exportconstColoredItem=({item})=>{return(<divclassName={`w-fullflexitems-centerspace-x-1borderrounded`}style={{backgroundColor:item.color+"1a",borderColor:item.color,borde......
  • 通过mybatisflex获取多数据源mapper
    基于mybatisflex1.8.4:@NoArgsConstructor(access=AccessLevel.PRIVATE)@Slf4jpublicclassDataSource{publicstaticfinalStringA="a";publicstaticfinalStringB="b";publicstaticfinalStringC="c";pub......
  • Flex布局-容器项
    弹性盒子是一种用于按行或按列的一维布局方法.元素可以膨胀以填充额外的空间,也可以收缩以适应更小的空间.flex重点概览对于flex重要的理解点在于:主轴与交叉轴换行与缩写主轴对齐放市场交叉轴对齐方式基于了解完上面的内容,我们能用flex布局实现如下几种......
  • css-flex布局 space-between最后一行向左对齐
    首先我们实现的是如下图<template><divclass="father"><divclass="child"></div><divclass="child"></div><divclass="child"></div><divclass="child......
  • FlexibleButton - 一个小巧灵活的C语言按键处理库+SerialChart - 能将串口数据实时绘
    1、FlexibleButton-一个小巧灵活的C语言按键处理库FlexibleButton是一个基于标准C语言的小巧灵活的按键处理库,支持单击、连击、短按、长按、自动消抖,可以自由设置组合按键,可用于中断和低功耗场景。项目主页:https://github.com/murphyzhao/FlexibleButton该按键库解耦了......
  • 采用flex布局,父组件width为百分比,解决子组件canvas画布width自适应问题
     创建EleResize.js文件(拷贝以下代码即可)varEleResize={ _handleResize:function(e){  varele=e.target||e.srcElement  vartrigger=ele.__resizeTrigger__  if(trigger){   varhandlers=trigger.__z_resizeListeners   if......
  • 条件编译#if、#elif、#ifdef的妙用
    前言—般情况下,C语言源程序中的每一行代码.都要参加编译。但有时候出于对程序代码优化的考虑,希望只对其中一部分内容进行编译,此时就需要在程序中加上条件,让编译器只对满足条件的代码进行编译,将不满足条件的代码舍弃,这就是条件编译。相关的预编译指令如下:条件编译功能预处理程......
  • flexx:创建交互式的 Web 页面
    Github地址:https://github.com/flexxui/flexxClicktheimagebelowforaninteractiveexample:[Flexx是一个强大的Python库,用于创建交互式的Web应用程序和用户界面。它提供了灵活的组件和布局管理器,使开发者可以轻松构建具有丰富交互性和动态性的应用。本文将详细介绍......
  • Go-Zero技能提升:深度探究goctl的妙用,轻松应对微服务开发挑战!(三)
    前言有位同学在群里说:“Go-Zero官方文档太简洁了,对小白有点不友好。好奇你们是怎么学习的?项目是怎么封装的?有什么提高开发效率的技巧吗?”。来来来,这期内容给你安排上,先教你goctl的妙用!前两篇文章分享了Go-Zero微服务快速入门和最佳实践(一)和Go-Zero从0到1实现微服务项目开发(......