zoukankan      html  css  js  c++  java
  • 【css】弹性盒模型

    弹性盒模型flexBox

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

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

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

    兼容性

    IE11 

    弹性盒模型内容

    弹性盒模型由弹性容器(flex container)和弹性子  元素(flex item)组成

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

    介绍几个常用方法:

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

    2 使用position:absolute + transform:translate

         .box{
                400px;
               height: 300px;
               position: relative;
               background-color: pink;
           }
            
           .child{
                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>
  • 相关阅读:
    js正则还原和转义特殊字符
    element表格鼠标悬浮上带有点击事件的变红-:row-class-name
    elemen-table表格数据转换-formatter属性
    SVN的安装及汉化的
    element中关于input框
    VUE之兄弟组件 $emit和$on、$bus的用法
    关于element表单校验(二)
    关于element表单校验(一)
    element表格里数据处理
    各类手册收藏整理
  • 原文地址:https://www.cnblogs.com/code-klaus/p/9010713.html
Copyright © 2011-2022 走看看