flex布局总结

最新推荐文章于 2022-06-13 20:28:41 发布

麦乐乐

最新推荐文章于 2022-06-13 20:28:41 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/qq_41831345/article/details/103661845

版权

今天只谈样式，不谈逻辑

阮老师的flex布局看了很多遍了，是每次开发，每次都需要看一遍的那种，但是还有有些问题没有用最完美的方法去解决。深究其原因，是因为没有真正的理解。也许有人会说，样式又不是逻辑，需要个鸟的理解？今天写这篇文章，目的就是希望自己写完之后，再次遇到千变万化的手机端样式调配问题，我不需要再去看任何文档，很熟练的去应付。

代码很简单

index.html

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100%;
        padding: 0 20px;
        display: flex;
        box-sizing: border-box;
        background:peachpuff;
    }
    p {
        background: palegreen;
    }
    span {
        background:purple;
    }
</style>
<body>
    <div class="box">
        <p>左边好看的撒</p>
        <span>右边你就就           </span>
    </div>
</body>
</html>

这是一个简单的不能再简单的flex布局。

当父元素是flex布局的时候，没有指定方向，默认是水平方向的排列。而内部的元素，无论是行内元素还是块元素，如果没有写宽度，宽度都是右内容撑开。然后又跟行内元素有所不同。

.box {
        width: 100%;
        padding: 0 20px;
        display: flex;
        box-sizing: border-box;
        background:peachpuff;
        height: 100px;
    }

当给父元素增加100px的高度时，可以看到，内部元素的高度是100%的。换个方向会怎样呢？

父元素高度去掉，增加flex-direction: column;

.box {
        width: 100%;
        padding: 0 20px;
        display: flex;
        box-sizing: border-box;
        background:peachpuff;
        flex-direction: column;
    }

两个元素在水平方向宽度是100%；

.box {
        width: 100%;
        padding: 0 20px;
        display: flex;
        box-sizing: border-box;
        background:peachpuff;
        flex-direction: column;
        height: 100px;
    }

父元素加上高度。可以看到，子元素的高度是由内容撑开的。

现在再回到水平方向，我们来看看布局的问题。

我们经常会看到这样的布局，两端分布，实现这样的布局很简单，只需要增加一个属性就可以了。但是真正的需求远远不只有这么简单的描述。真实的需求是这样的，保证中间距离由24px，超出的话左边展示...。右边字体缩小，但是两边的距离都不固定。

也就是说，如果我右边足够大，左边就需要缩小，超出展示...。如下图：

如果说，右边内容不多，左边就需要放大，超出展示...。如图：

整体效果

分析需求会发现，左右都是自适应的，宽度都是不固定。我们来一步步实现这个效果。

第一步先让两个元素翻开吧

  .box {
        width: 100%;
        padding: 0 20px;
        display: flex;
        box-sizing: border-box;
        background:peachpuff;
        height: 100px;
        justify-content: space-between;
    }

第二布左右自适应。

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。上面看到的就是flex-grow为0的情况。

让其中一个变成1。

   p {
        background: palegreen;
        flex-grow: 1;
    }

这样p就占据了左右的剩余空间。相当于左侧有了宽度，p就可以增加超出内容展示...的需求了

p {

    background: palegreen;

    flex-grow: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

效果是这样的，这是因为flex布局的另外一个属性。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

这个属性的默认值导致了右侧的缩小。所以需要将右侧这个属性设置为0。

 span {
      background:purple;
      flex-shrink: 0;
  }

左侧元素的 flex-shrink是默认值1,空间不足，左侧宽度会自动缩小。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

左侧就是简化这样写：flex: auto;

p {
        background: palegreen;
        flex: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

右边：flex: none;

 span {
        background:purple;
        flex: none;
    }

完美实现。

麦乐乐

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
flex布局总结

今天只谈样式，不谈逻辑阮老师的flex布局看了很多遍了，是每次开发，每次都需要看一遍的那种，但是还有有些问题没有用最完美的方法去解决。深究其原因，是因为没有真正的理解。也许有人会说，样式又不是逻辑，需要个鸟的理解？今天写这篇文章，目的就是希望自己写完之后，再次遇到千变万化的手机端样式调配问题，我不需要再去看任何文档，很熟练的去应付。代码很简单index.html<!DOCT...
复制链接

扫一扫