在使用flex布局时，若出现换行，有两种较为特殊的现象是值得我们研究的：

  • 子元素高度被拉伸，其实际高度大于它的内容高度。
  • 各行子元素之间的行间距过大，甚至我们根本没有给子元素设置margin。

现在我们将要探究引发这两种现象的原因及解决方案。

一、子元素高度拉伸问题

  • 原因：没有明确声明子元素的高度。
  • 现象：子元素高度没有明确声明时，若容器有纵向空余高度，各行子元素将均分空余高度。
  • 解决方案：明确声明各子元素的高度。
  • 特别说明：不换行也会均分，与行数无关。
  • 案例：（可直接运行）
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .container {

            margin: 0 auto;

            display: flex;

            flex-wrap: wrap;

            height: 600px;

            width: 800px;

            border: 1px solid red;

        }

        .item{

            margin-right: 20px;

            margin-bottom: 20px;

            width: 200px;

            background-color: green;

        }

        .item-content{

            height: 200px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

    </div>

</body>

</html>

在以上案例中，每个.item元素的内容高度由.item-content撑起来，为200px，实际高度却为280px。这是由于我们没有显式声明.item元素的高度，采用flex多行布局并且容器有空余，那么各行子元素将均分容器的剩余高度，可采用给.item设置height为200px来解决该问题。

二、行间距异常问题

  • 原因：没有明确声明各行元素的纵向排列方式。
  • 现象：默认情况下，若容器有纵向空余高度，且子元素高度已显示声明，那么各行将出现额外行间距，且每两行的行间距相等。
  • 解决方案：设置align-content属性。
  • 特别说明：不换行也会均分，与行数无关。
  • 案例：（可直接运行）
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .container {

            margin: 0 auto;

            display: flex;

            flex-wrap: wrap;

            /* align-content: flex-start; */

            height: 600px;

            width: 800px;

            border: 1px solid red;

        }

        .item{

            margin-right: 20px;

            margin-bottom: 20px;

            height: 200px;

            width: 200px;

            background-color: green;

        }

        .item-content{

            height: 200px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

        <div class="item">

            <div class="item-content"></div>

        </div>

    </div>

</body>

</html>

在以上案例中，我们希望各行的行间距是我们设置的margin-bottom的值20px，那么我们只需给容器设置align-content: flex-start；即可。这将使得各行紧密排列，剩余空间都到了容器的底部。更多的排列方式可查阅align-content文档。

CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题的更多相关文章

  1. 【全面解禁!真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)

    原文:[全面解禁!真正的Expression Blend实战开发技巧]十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel) 写这篇文 ...

  2. 提高你css技能的css开发技巧(转载)

    一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...

  3. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  4. 提高你css技能的css开发技巧

    好久没整理博客了 进来啰嗦两句   继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...

  5. 当display=none时，元素和子元素高度为0的解决办法

    在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...

  6. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. Web之CSS开发技巧: CSS 居中大全

    <center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...

  8. CSS开发技巧(三)：图片点击缩放

    前言  利用CSS实现图片的点击缩放是一个很值得研究的效果.在某些业务需求场景中,我们可能并没有足够的空间展示过大的图片,这就需要限制图片容器的宽度和高度.然而图片限制了宽度,一些图片的细节便又无法看 ...

  9. Web之CSS开发技巧: CSS @media

    CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...

随机推荐

  1. UnboundLocalError，探讨Python中的绑定

    绑定 将python闭包之前,先梳理一下闭包中的绑定操作. 先看看2个相关的错误 NameError 和UnboundLocalError When a name is not found at al ...

  2. 浅谈C++三种传参方式

    浅谈C++三种传参方式 C++给函数传参中,主要有三种方式:分别是值传递.指针传递和引用传递. 下面通过讲解和实例来说明三种方式的区别. 值传递 我们都知道,在函数定义括号中的参数是形参,是给函数内专 ...

  3. Win 10 C 盘突然爆满，怎么清理？

    Win 10 C 盘突然爆满,怎么清理? 使用windows的小伙伴们都知道,C盘是安装系统的,有时候不知道为啥突然就爆满了,查看我的电脑,C盘显示红色的.是不是感觉狠揪心,想删除一些东西有不敢删除, ...

  4. 给定一个整数数组 nums 和一个目标值 target，求nums和为target的两个数的下表

    这个是来自力扣上的一道c++算法题目: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案 ...

  5. 安卓开发学习日记 DAY3——TextView,EditView,ImageView

    今天学习了一些控件的使用方法,包括TextView,EditView,ImageView 1.TextView,输出一个文本呗 主要属性有 android:id 标志 android:layout_w ...

  6. spark 大杂烩

    累加器 val dataRdd = sc.makeRDD(List(1, 2, 3, 4), 2) var sum = 0 //累加器可以收集driver和各个excuter中累加的结果 //如果此处 ...

  7. Python趣味入门3:变量、字串输入与输出

    安装配置python环境完毕,非常有必要花十分钟对一些基本概念:变量.数学字符.输入.输出等4个概念进行理解,下面通过简单示例,深入了解python的基本语法. 本文的示例均在IDLE的命令行模式中完 ...

  8. Js 事件原理与事件委托

    事件原理三阶段 捕获(有外向内).目标.冒泡(由内向外) 事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点( ...

  9. 动态规划_基础_最长公共子序列_多种方法_递归/dp

    D: 魔法少女资格面试 题目描述 众所周知,魔法少女是一个低危高薪职业.随着近年来报考魔法少女的孩子们越来越多,魔法少女行业已经出现饱和现象!为了缓和魔法少女界的就业压力,魔法少女考核员丁丁妹决定增加 ...

  10. svg如何设置中心点进行缩放

    中心点设置:x = x+width/2   y=y+height/2缩放开始前后需要变换对应的位置,直接举例:<rect x="110" y="100"  ...