第七周灵活布局

snail131

于 2017-05-13 09:29:52 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/qq_36807080/article/details/71775494

版权

一.行级元素可以用块级元素的方式显示，也可以同时具有两者的特点

   下面的div没有运用浮动就可以并排显示

        img {
            width: 100px;
            display: block;
        }

        div {
            width: 48%;
            border: 1px solid red;
            display: inline-block;
            /*width如果是行级元素就不生效
            而这个就包含行级好块级特点*/
        }
    </style>

    <title></title>
</head>
<body>
<img src="../../img/diannao.jpg" alt=""/>
<img src="../../img/diannao.jpg" alt=""/>


<div>div1</div>
<div>div2</div>

二.传统方式解决元素居中显示是件十分头疼的事，二使用灵活布局的话，就很便捷。

<style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            display: flex;
            /*水平轴上的对齐方式*/
            justify-content: center;
            /*交叉轴上的对齐方式*/
            align-items: center;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background: yellow;

        }
    </style>
    <title>解决居中显示</title>
</head>
<body>
<div id="div1">
    <div id="div2">
    </div>
</div>
</body>

三.实现浮动效果

    <style>
        #container{
            display: flex;
            /*flex-direction: row-reverse;*/
            /*换行*/
            /*flex-wrap:wrap;*/
        }
        #left{
            width: 20%;
            height: 100px;
            background-color: red;
        }
        #center{
            width: 60%;
            height: 100px;
            background-color: yellow;
        }
        #right{
            width: 20%;
            height: 100px;
            background-color: greenyellow;
        }
        #right2{
            width: 20%;
            height: 100px;
            background-color: green;
        }
    </style>
    <title>实现浮动效果</title>
</head>
<body>
<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>
    <!-- 因为默认值是不换行，所以right2已在一行-->
    <div id="right2">right</div>
</div>
</body>

四.解决双飞翼布局

    <style>
        #container {
            display: flex;
        }

        #left{
            width: 20%;
            height: 100px;
            background-color: red;
            order:1;
        }
        #center{
            width: 60%;
            height: 100px;
            background-color: yellow;
            order:2;
            /*flex-shrink: 0;*/
        }
        #right{
            width: 20%;
            height: 100px;
            background-color: greenyellow;
            order:3;
        }

    </style>
    <title>解决双飞翼布局</title>
</head>
<body>
<!--order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。-->


<div id="container">
    <div id="center">center</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
</body>

关于灵活布局的详细介绍可以查看这位大神的文章 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

snail131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第七周灵活布局

一.行级元素可以用块级元素的方式显示，也可以同时具有两者的特点下面的div没有运用浮动就可以并排显示 img { width: 100px; display: block; } div { width: 48%; border
复制链接

扫一扫