弹性布局--display:flex

最新推荐文章于 2024-04-27 10:05:36 发布

rememberyf

最新推荐文章于 2024-04-27 10:05:36 发布

阅读量269

点赞数

分类专栏： css 文章标签： display：flex 弹性布局布局神器圣杯布局

本文链接：https://blog.csdn.net/rememberyf/article/details/81179700

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天我们来讲一下css3新特性，它可以简单、完整、响应式的完成所有页面的布局，且目前已经得到了所有浏览器的支持，Flex为Flexible Box的缩写，翻译过来也就是我们的弹性盒子，为盒状模型提供了最大的灵活性，且任何一个容器都可以指定为Flex布局。

弹性布局的整体架构

弹性盒子默认有两条轴：横轴和纵轴，默认的主轴是横轴（方向自左向右），默认的辅轴是纵轴（方向自上向下），当容器设置了display：flex后，那么这个容器便拥有了弹性容器的一切属性，如下所示：

flex-direction(决定了主轴的方向，即排列顺序)
flex-wrap(定义项目的换行情况，默认情况下是不换行的，同比例缩小项目)
flex-flow(是flex-direction和flex-wrap的缩写，默认情况下是 row nowrap )
justify-content(定义了项目在主轴上的对其位置)
align-items(定义在交叉轴上的对齐方式)
我们可以用一张图来了解下它的整体架构是怎样的：

当然，作为父元素的盒子有这么多的属性，那么孩子也应该有属性吧，如下所示：
order(定义项目的排列顺序，默认的，数值越小，排列越靠前，可以为负值)
flex-grow(定义项目的放大比例，默认为0，不放大；若不为0，剩余的空间按比例放大)
flex-shrink(定义项目的缩小比例，默认值为1，即：有空间不足的情况下将同比例缩小，不能够为负值)
flex-basis(定义在分配多余的空间前，项目占据的主轴空间)

display-flex的布局便利

1、项目的居中设置

我们平常对文本图像等采用“text-align=center”来实现居中的效果，那么我们在了解了display：flex布局后，我们可以对拥有父元素的任何模型来实现居中效果，变得更加强大，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: pink;
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>使用display：flex实现水平居中的效果</p>
    </div>
</body>
</html>

运行的截图效果如下：
项目在主轴上的对齐方式

2、快速实现圣杯（双飞翼）布局

在之前，我们实现圣杯布局时，都是用的是float浮动以及margin外边距的使用，但是在运用display：flex之后，我们就能够很好地布局，也变得很easy了。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>css3--display:flex(弹性布局)实现圣杯布局</title>
    <style type="text/css">
        .out{
            display: flex;
            height: 300px;
            background-color: pink;
        }
        .inner1{
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .inner2{
            width: 100%;
            height: 100px;
            background-color: yellow;
        }
        .inner3{
            width: 120px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="inner1">display:flex实现圣杯布局</div>
        <div class="inner2">display:flex实现圣杯布局</div>
        <div class="inner3">display:flex实现圣杯布局</div>
    </div>
    <script>
        for(var i={j:0};i.j<5;i.j++)
        {
            (function(i){
                setTimeout(function(){console.log(i.j)},0);
            })(JSON.parse(JSON.stringify(i)));
        }
    </script> 
</body>
</html>

在这里，我们不用担心body塌了，不用担心float布局带来的影响，在弹性盒子里面，我们的三栏式布局很容易实现，且很稳定，运行效果的截图如下所示：
圣杯布局的简易实现
这些也仅仅是部分例子，display：flex的作用远远比这个大的多，在这里我们就不再赘述了，只是带大家了解下这个新特性及它的作用，如果大家有问题，欢迎讨论。