【css】弹性盒模型

时间 2019-11-13

标签 css 弹性模型栏目 CSS 繁體版

原文原文链接

弹性盒模型flexBox布局

弹性盒模型是c3的一种新的布局模式flex

它是指一种当页面须要适应不一样屏幕大小以及设备类型时，确保元素有恰当行为的布局方式。spa

引入弹性盒模型布局的目的是提供一种更有效的方法来对一个容器中的子元素进行排列、对齐和分配空白空间。code

兼容性orm

IE11 blog

弹性盒模型内容it

弹性盒模型由弹性容器（flex container）和弹性子元素（flex item）组成io

将父容器设置display:flex转换为弹性容器form

介绍几个经常使用方法：class

flex-direction:

row:横向从左到右排列，默认

row-reverse:横向从右到左排列（最后一项在最前面）

column:纵向排列

column-reverse:反转纵向排列（最后一项排在最上面）

justify-content:

　　flex-start:起始点对齐（左对齐）

　　flex-end:终止点对齐（右对齐）

　　center:居中对齐

　　space-around:四周环绕

　　space-between:两端对齐

让盒子水平垂直居中的方法：

1 使用弹性盒模型 display:flex + justify-content:center + align-items:center

    <style>
       .box{
           width: 400px;
           height: 300px;
           display: flex; 让盒子变成弹性盒模型
           justify-content: center; 居中
           align-items: center;  居中
           background-color: pink;
       }
        
       .child{
           width: 150px;
           height: 150px;
           background-color: skyblue;
       } 
        
    </style>
</head>
<body>

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

2 使用position:absolute + transform:translate

     .box{
           width: 400px;
           height: 300px;
           position: relative;
           background-color: pink;
       }
        
       .child{
           width: 150px;
           height: 150px;
           background-color: skyblue;
           position: absolute;
           top: 50%;
           left: 50%;
           transform:translate(-50%,-50%)
       } 
        
    </style>
</head>
<body>

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