css3 box弹性布局

1.弹性布局

（1）属性

display:flex; 把容器转化为弹性布局
flex-direction: 规定里面的元素按照什么方式来布局

row	项目水平显示
row-reverse	以相反的顺序水平显示
column	项目垂直显示
colummn-reverse	以相反的方向垂直显示

align-items  子元素在y 轴上对其的方式

center	居中
flex-end	底边
flex-start	上边
stretch	垂直拉伸

justify-content x轴对齐

center	居中
flex-end	右边对齐
flex-start	左边对齐
space-between	左右两边对齐，中间平分
pace-around	均分所有空白

flex-wrap: wrap;  控制行里面  进行换行
align-content: space-between;  在行里面使用 行留白的时候有效果
flex: 1; 行里面的元素进行分配空间  按等份分配
align-items  子元素在y 轴上对其的方式

center	居中
flex-end	底边
flex-start	上边
stretch	垂直拉伸

align-items:stretch;
justify-content: center;
align-items: center;

（2）实例

<body>
   <div class="tr">
      <div class="te">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
      </div>
   </div>
</body>
<style>
        .tr{
            width: 300px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid red;
            box-sizing: border-box;
            display: flex;/*转为弹性布局*/
            flex-direction: column;
        }
        .te{
            width: 300px;
            height: 100px;
            border-bottom: 1px solid black;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-content: space-between;
            flex-wrap: wrap;
        }
        .te>div{
            width: 30px;
            height: 20px;
            border: 1px solid blue;
            box-sizing: border-box;
        }
        .te>div:nth-child(1){
            flex: 3;
        }
        .te>div:nth-child(2){
            flex: 1;
        }
        .te>div:nth-child(3){
            flex: 2;
        }
        .te>div:nth-child(4){
            flex: 3;
        }
        .te>div:nth-child(5){
            flex: 1;
        }
        .te>div:nth-child(6){
            flex: 2;
        }
</style>

效果展示：

2.手机自适应

（1）属性

viewport 视口
width=device-width  宽度等于屏幕的宽
initial-scale=1.0  伸缩比例为1.0
maximum-scale=3.0  最大伸缩比例
minimum-scale=1.0  最小伸缩比例
user-scalable=no 禁止用户缩放

（2）实例

<div class="b">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<style>
    *{
        margin: 0;
    }
    .b{
        width: auto;
        height: 300px;
        display: flex;
        flex-direction: row;
    }
    .b>div{
        flex: 1;
        height: 50px;
        border: 1px solid red;
    }
</style>

效果展示：

3.固定模式适应手机屏幕

<body>
    <div class="b">
        1
    </div>
</body>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .b{
            margin: auto;
            width: 300px;
            height: 500px;
            border: 1px solid red;
            box-sizing: border-box;
        }
    </style>
</head>

效果展示：

猜你喜欢