首页 > > 网页制作 > css >

css之弹性盒模型

2019-10-25 06:31:25来源：博客园阅读 ()

css之弹性盒模型

　　弹性盒子（Flexible Box/filebox）是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

　　弹性盒子由弹性容器（父元素）和弹性子元素（可以一个或者多个）组合而成。弹性容器通过设置display属性的值为flex或者是inline-flex将其定义为弹性容器。

一、display:flex　

　　　　作用：让当前元素形成盒，控制子元素。

　　　　特点：弹性盒里的子元素，都是沿着主轴排列，默认情况下，主轴为X轴。弹性盒里的子元素都能直接添加宽高（不用在乎是块元素还是行内元素）。让弹性盒里的一个子元素左右上下居中，直接给子元素添加margin:auto ;就可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    section{
        display: flex;
    }
    span{
        width: 100px;
        height: 100px;
        background-color: green;
        margin: auto;
    }
    </style>
</head>
<body>
   <section>
        <span></span>
       
   </section>
   
</body>
</html>

二、具有以下属性：

1、flex-direction　　　　　　改变主轴的排列方向

　　属性值：

　　　　row　　　　　　 X为主轴

　　　　column　　　　　Y为主轴

　　　　row-reverse　　　在主轴反向排列

2、justify-content　　　　主轴对齐方式

　　属性值：

　　　　flex-start　　　　默认，顶端对齐

　　　　flex-end　　　　末端对齐

　　　　center　　　　　居中对齐

　　　　space-between　两端对齐，中间自动分配

　　　　space-around　　自动分配距离

3、align-items　　　　　　侧轴对齐方式

　　属性值：

　　　　flex-start　　　　默认，顶端对齐

　　　　flex-end　　　　末端对齐

　　　　center　　　　　居中对齐

　　　　baseline和flex-start等效

4、flex-wrap　　　　　　换行

　　属性值：

　　　　wrap　　　　　　换行

　　　　nowrap　　　　　不换行

　　　　wrap-reverse　　反向换行

5、allign-content　　　　　行与行之间对齐方式

　　属性值：

　　　　flex-start　　　　默认，顶端对齐

　　　　flex-end　　　　末端对齐

　　　　center　　　　　居中对齐

　　　　space-between　两端对齐，中间自动分配

　　　　space-around　　自动分配距离

6、align-self　　　　　　控制一个子元素（灵活元素）在侧轴的对齐方式

　　属性值：

　　　　auto　　　　　　默认值。元素继承了它的父容器的align-items属性，如果没有父容器则为“stretch”

　　　　stretch　　　　　元素被拉伸以适应容器

　　　　content　　　　　元素位于容器的中心

　　　　flex-start　　　　元素位于容器的开头

　　　　flex-end　　　　元素位于容器的结尾

7、order　　　　　　　　排序（控制子元素的先后顺序，数值越大越向后排。可以为负）

8、flex:1　　　　　　　　把剩余空间全部分配给当前元素（当然指的是分配主轴上的空间）

　　　　flex是一个复合属性,设置或者是检索弹性盒模型对象的子元素如何分配空间

　　　　新版盒模型

　　　　flex三个属性介绍：flex-grow:一个数字，规定项目相对于其它灵活的项目进行扩展的量

　　　　　　　　　　　　 flex-shrink:一个数字，规定项目将相对于其它灵活项目进行收缩的量

　　　　　　　　　　　　 flex-basis:项目长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        padding:0;
        margin:0;
        box-sizing: border-box;
    }
    #section1{
        width: 600px;
        height: 500px;
        background-color: aliceblue;
        margin: auto;
        display: flex;
        flex-direction: column;
        /* flex-direction: row-reverse; */
        flex-direction: row;             /*属性1*/
        justify-content: center;         
        justify-content: space-around;   /*属性2*/
        align-items: baseline;
        align-items: flex-start;
        align-items: center;             /*属性3*/
        flex-wrap: wrap;                 /*属性4*/
        align-content: flex-end;
        align-content: center;          /*属性5*/
       
    }
   span{
        width: 100px;
        height:100px;
        background: orange;
        border-radius: 50%;
        font-size: 20px;
        color:white;
        text-align: center;
    }

   
   #section2{
       width: 600px;
       height: 400px;
       background-color: aliceblue;
       margin: 0 auto;
       display: flex;
       align-items: center;
   }
   div{
       width: 100px;
       height: 100px;
       background-color: antiquewhite;
       font-size: 20px;
       color:white;
       text-align: center;
   }
   div:nth-child(1){
       background-color: red;
       order: 3;                        /* 属性7 */
       flex:1;                           /* 属性8 */
   }
   div:nth-child(2){
       background-color: blue;
       /* align-self: flex-end;          属性6 */
       flex:1; 
       border:10px solid green;
      
   }
   div:nth-child(3){
      flex:1;                         
   }


    </style>
</head>
<body>
    <section id="section1">
       <span>1</span>
       <span>2</span>
       <span>3</span>
       <span >4</span>
       <span>5</span>
       <span>6</span>
       <span>7</span>
      
       
    </section>
    <br>
    <section id="section2">
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
    </section>
</body>
</html>

　　案例1：骰子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #e7e7e7;
            padding: 4;
            border-radius: 10px;
            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
        }

        span {
            display: block;
            width: 24px;
            height: 24px;
            background-color: black;
            border-radius: 12px;
            margin: 4px;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
        }

        div:nth-child(1) {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div:nth-child(2) {
            display: flex;
            justify-content: space-between;
        }

        div:nth-child(2) span:nth-child(2) {
            align-self: flex-end;
        }

        div:nth-child(3) {
            display: flex;
            flex-direction: column;
        }

        div:nth-child(3) span:nth-child(2) {
            align-self: center;
        }

        div:nth-child(3) span:nth-child(3) {
            align-self: flex-end;
        }

        div:nth-child(4) {
            display: flex;
            justify-content: space-between;
        }

        div:nth-child(4) p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        div:nth-child(5) {
            display: flex;
            justify-content: space-between;
        }

        div:nth-child(5) p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        div:nth-child(5) p:nth-child(2) {
            align-self: center;
        }
        div:nth-child(6) {
            display: flex;
            justify-content: space-between;
        }

        div:nth-child(6) p {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    </style>

</head>

<body>
    <div>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <p>
            <span></span><span></span>
        </p>
        <p>
            <span></span><span></span>
        </p>
    </div>
    <div>
        <p>
            <span></span><span></span>
        </p>
        <p>
            <span></span>
        </p>
        <p>
            <span></span><span></span>
        </p>
    </div>
    <div>
        <p>
            <span></span><span></span><span></span>
        </p>
        <p>
            <span></span><span></span><span></span>
        </p>
    </div>
</body>
</html>