社区首页 >专栏 >网页布局之flex布局的使用

网页布局之flex布局的使用

天天_哥

发布于 2018-09-29 06:36:40

98400

代码可运行

文章被收录于专栏：天天天天

运行总次数：0

代码可运行

1.引言

Flex布局方案很早都提出来了，然后可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展，目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。.

2.网页布局方案

在网页设计过程中，水平垂直居中是很常用的，但是传统的方案使用起来分厂费劲，下面来看flex如何实现

        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
            width: 100%;
            height: 100%;
            background: #eee;
            justify-content: center;
            align-items: center;
        }

        .box {
            width: 200px;
            height: 300px;
            background: yellowgreen;
        }

        <body>
            <div class="box"></div>
        </body>

如此看来这样水平垂直居中是不是很方便的实现了，

3.什么是flex布局？

意为"弹性盒模型"，用来为盒状模型提供最大的灵活性。Webkit 内核的浏览器，必须加上-webkit前缀。当父容器设置了display：flex时。子元素自动成为其成员，容器默认存在两根轴：水平方向的主轴和垂直的交叉轴，项目默认沿主轴排列。

3.1flex容器(父容器)的一些属性：

//属性决定主轴的方向（即项目的排列方向）
flex-direction

//默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
flex-wrap

//flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow

//属性定义了项目在主轴上的对齐方式。
justify-content

//属性定义项目在交叉轴上如何对齐。
align-items

//属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content

3.2flex项目(子元素)的一些属性

//定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order

//定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow

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

//定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-basis

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

//允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self