JS Web的Flex弹性盒子模型

Posted work hard work smart

tags:

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

1. justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Flexbox弹性盒布局</title>
    <style>
        .demo{
            display: -webkit-flex;
            justify-content: space-between;
        }
    </style>
</head>
<style>

</style>
<body>
<div class="demo">
    <div>姓名: 张三</div><div>年龄: 26岁</div>
</div>
<div class="demo">
    <div>性别: 男</div><div>生日: 1995-05-06</div>
</div>
<div class="demo">
    <div>检查编号: 25</div><div>住院号: 198</div>
</div>
</body>
</html>

  

效果图

 2.flex 三行二列

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Flexbox弹性盒布局</title>
    <style>
        .demo{
            display: -webkit-flex;
        }

        .item-flex{
            flex:1;
        }
    </style>
</head>
<style>

</style>
<body>
<div class="demo">
    <label class="item-flex">姓名: 张三</label><label class="item-flex">年龄: 26岁</label>
</div>
<div class="demo">
    <label class="item-flex">性别: 男</label><label class="item-flex">生日: 1995-05-06</label>
</div>
<div class="demo">
    <label class="item-flex">检查编号: 25</label><label class="item-flex">住院号: 198</label>
</div>
</body>
</html>

  

  效果图

 

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

Flex弹性盒子布局

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

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

css弹性布局是啥

Flexible 弹性盒子模型之flex

flex-direction css3属性设定弹性盒子模型子元素反向排列