CSS3-伸缩布局

2019-02-15 本文已影响93人 riverhh

CSS3在布局方面做了非常大的改进，使得对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

伸缩布局.png

响应式

在没有伸缩布局之前，为了实现响应式的效果需要进行如下的操作

<!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>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        section div {
            width: 33.33%;
            height: 100%;
            float: left;
        }
        section div:nth-child(1) {
            background-color: pink;
        }
        section div:nth-child(2) {
            background-color: purple;
        }
        section div:nth-child(3) {
            background-color: pink;
        }

    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    
</body>
</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>
    <style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 父盒子添加flex:伸缩布局 */
            display: flex; 
        }
        section div {
            height: 100%;

        }
        section div:nth-child(1) {
             /* 子盒子添加份数 */
            flex: 1;
            background-color: pink;
        }
        section div:nth-child(2) {
            flex: 2;
            background-color: purple;
        }
        section div:nth-child(3) {
            flex: 1;
            background-color: pink;
        }

    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    
</body>
</html>

各属性详解

1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度不能小于 280(小于就不缩放)
max-width: 1280px 最大宽度不能大于 1280

2.flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列
flex-direction: row 水平排列

携程网案例

http://m.ctrip.com/html5/

<!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>携程网</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        body {
            /* 弹性布局的最小宽度和最大宽度 */
            min-width: 320px;
            max-width: 540px;
            margin: 0 auto;
        }

        header {
            width: 100%;
            /*继承body的宽度*/
            height: 100px;
        }

        header img {
            width: 100%;
            /*继承header的宽度*/
            height: 100%;
        }

        nav {
            padding: 5px;
        }

        .row {
            height: 90px;
            width: 100%;
            background-color: #ff697a;
            border: radius 8px;
            display: flex;
            margin-bottom: 5px;
            /*父盒子伸缩布局*/
        }

        nav .row:nth-child(2) {
            background-color: #3d98ff;
        }

        nav .row:nth-child(3) {
            background-color: #44c522;
        }

        nav .row:nth-child(4) {
            background-color: #fc9720;
        }

        .row3 {
            flex: 1;
            /*孩子每人占1份*/
            border-left: 1px solid #fff;
        }

        .row div:first-child {
            border: 0;
        }

        .hotel {
            display: flex;
            flex-direction: column;
        }

        .hotel a {
            flex: 1;
            font-size: 16px;
            color: #fff;
            text-align: center;
            line-height: 45px;
            text-decoration: none;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        .hotel a:first-child {
            border-bottom: 1px solid #fff;
        }
    </style>
</head>

<body>
    <header>
        <img src="images/ctrip.jpg" alt="">
    </header>
    <nav>
        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">民宿.客栈</a>
            </div>
        </div>
        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">民宿.客栈</a>
            </div>
        </div>
        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">民宿.客栈</a>
            </div>
        </div>
        <div class="row">
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">民宿.客栈</a>
            </div>
        </div>
    </nav>
</body>

</html>

justify-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>
        section {
            width: 1000px;
            height: 300px;
            border: 2px solid pink;
            margin:  100px auto;
            display: flex;
        }
        div {
            width: 250px;
            height: 100%;
        }
        div:first-child {
            background-color: pink;
        }
        div:nth-child(2) {
            background-color: purple;
        }
        div:nth-child(3) {
            background-color: skyblue;
        }

    </style>
</head>

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>

</html>

效果如下所示：

原始效果.png

这样会留下一片空白的区域，这个区域怎么进行布局呢？这个世纪后可以使用justify-content

值	描述	白话文
flex-start	默认值。项目位于容器的开头。	让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end	项目位于容器的结尾。	让子元素从父容器的后面开始排序但是盒子顺序不变
center	项目位于容器的中心。	让子元素在父容器中间显示
space-between	项目位于各行之间留有空白的容器内。	左右的盒子贴近父盒子，中间的平均分布空白间距
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	相当于给每个盒子添加了左右margin外边距

flex-end效果

flex-end效果

center效果

center效果.png

space-between效果

space-between效果.png

space-around效果

space-around效果.png

align-items调整侧轴对齐（垂直对齐）

子盒子如何在父盒子里面垂直对齐（单行）

值	描述	白话文
stretch	默认值。项目被拉伸以适应容器。	让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
center	项目位于容器的中心。	垂直居中
flex-start	项目位于容器的开头。	垂直对齐开始位置上对齐
flex-end	项目位于容器的结尾。	垂直对齐结束位置底对齐

flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示强制一行内显示
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

原始的布局代码：

<!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>
        section {
            width: 1000px;
            height: 600px;
            border: 2px solid pink;
            margin:  100px auto;
            display: flex;
            justify-content: space-around;
        }
        div {
            width: 250px;
            height: 200px;
        }
        div:first-child {
            background-color: pink;
        }
        div:nth-child(2) {
            background-color: purple;
        }
        div:nth-child(3) {
            background-color: skyblue;
        }
        div:nth-child(4) {
            background-color: hotpink;
        }
        div:nth-child(5) {
            background-color: darkcyan;
        }

    </style>
</head>

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </section>
</body>

</html>

效果为：

原始的效果.png

我们可以看到原始的效果把每个子盒子的宽度压缩小了

flex-wrap:wrap的效果

wrap的效果.png

align-content（由flex-wrap产生的独立行）

多行垂直对齐方式齐
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

值	描述	测试
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

flex-start .png

center 多行垂直居中】

center 多行垂直居中.png

space-around 多行空白

space-around 多行空白.png

order控制子项目的排列顺序，正序方式排序，从小到大

用css 来控制盒子的前后顺序。用order 就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是 0

order: 1;