我所知道的弹性盒子模型

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我所知道的弹性盒子模型相关的知识,希望对你有一定的参考价值。

  弹性盒子是css自适应布局的一种好用的方法,有了它可以减少浮动的使用(避免清浮动).

  首先考虑一下兼容性

  基本高版本主流浏览期都兼容,不过需要加前缀 最新写法为display:flex但是实际很多国产浏览器并不兼容,所以我还是用的display:box的写法并没有兼容两种.

  所以主要介绍-webkit-box,想了解flex属性可以查看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html(用法不太一样呀回来要整理整理)

  写法为父级display后,子元素自动成为容器成员,并且floatclearvertical-align属性将失效.

.box{
        display:box;
        display:-webkit-box;/*(会与display:block冲突)*/
        -webkit-box-align:center;
        -webkit-box-pack:center;
    
}    /*(主要做移动端只加了webkit)*/

  父级容器box-align表示子集在y轴的排列方式 start | end | center | baseline | stretch  start表示顶边对齐,end为底部对齐,center为居中对齐,baseline表示基线(英文字母o,m,n等的底边位置线)对齐,stretch  伸缩和父级等高.

  父级容器box-pack表示子集在x轴的排列方式 start | end | center | justify 与父标签的起始位置对齐  末尾 居中 两端对齐

  box-pack-justify两端对齐可以用来 设置两端对齐的标题例如

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tit{
            height:200px;
            width:200px;
            background:red;
            display:-webkit-box;
            display:-moz-box;
            display:box;
            -webkit-box-align:center;
            -webkit-box-pack:justify;
            padding:0 20px;
            color:#fff;

        }
        .tit div:nth-child(1){
            height:40px;
            width:60px;
            background:#000;
            text-align:center;
        }
        .tit div:nth-child(2){
            height:30px;
            width:40px;
            background:#000;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class=‘tit‘>
        <div></div>
        <div></div>
    </div>
</body>
</html>

如果背景相同可以设置两端对齐也可以用table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tit{
            height:200px;
            width:200px;
            background:red;
            padding:0 20px;
            color:#fff;
            display:table;

        }
        .tit div:nth-child(1){
            height:40px;
            width:60px;
            text-align:left;
            display:table-cell;
            vertical-align: middle;
        }
        .tit div:nth-child(2){
            height:30px;
            width:40px;
            text-align:right;
            display:table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class=‘tit‘>
        <div></div>
        <div></div>
    </div>
</body>
</html>

box-orient可以设置排序方式 horizontal(水平) vertival (垂直)

子集容器可以设置-webkit-box-flex属性

表示占父级容器分割的分数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tit{
            height:200px;
            width:200px;
            background:red;
            padding:0 20px;
            color:#fff;
            display:-webkit-box;
            display:-moz-box;
            display:box;
        }
        .tit div:nth-child(1){
            height:40px;
            background:#000;
            -webkit-box-flex:1;/*占总数1/3*/
        }
        .tit div:nth-child(2){
            height:30px;
            -webkit-box-flex:2;/*占总数2/3*/
            background:#000;
        }
    </style>
</head>
<body>
    <div class=‘tit‘>
        <div></div>
        <div></div>
    </div>
</body>
</html>

 注意: 如果两个box-flex 的值设置相同, 会均分父级宽度 。注意如果子集内容不同,会出现不能均分情况需要加个任意宽度 ,width:0%;width:100%;之类的都可以.

<div class=‘tit‘>
        <div>左123</div>
        <div>右456888</div>
</div>

 

  

 

以上是关于我所知道的弹性盒子模型的主要内容,如果未能解决你的问题,请参考以下文章

Flex弹性盒子布局

css弹性布局是啥

CSS3中的弹性盒子模型

CSS3--Flex弹性盒子布局:使用弹性盒子模型布局微信客户端

弹性盒模型

[ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示