清除display:flex样式

一、页面行排列布局

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

<body>

        <div class="main">

                <div class="left">左侧区域</div>

                <div class="right">右侧区域</div>

                <div class="clear"></div>

        </div>

</body>

css部分

.main .left,.main .right{

    border: 1px solid #FE6464;

    height: 200px;

    text-align: center;

    line-height: 200px;

    color: #FE6464;

    font-size: 30px

}

.left{

    width: 48%;

    float: left;

}

.right{

    width: 48%;

    float: right;

}

.clear{

    clear: both;

}

这种布局有两个缺点

1.需要一个空div来清除浮动,当然也可以选用其他清除浮动的方法,但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的,浏览器宽度变的过窄时,.right会被挤到下面

用display:flex布局,可以解决这两个缺点

刚才的html部分不变,css部分

.main .left,.main .right{

        padding:20px;

        display:flex;

}

.left{

        flex:1;

}

.right{

        flex:1;

}

.clear{

        clear: both;

}

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin:auto auto;这个方法的使用前提就是先把父元素设为display:flex

html部分

<div>

        <div class="middle"><上下左右居中/div>

</div>

css部分

.main{

        padding: 20px;

        display: flex;

}

.middle{

        margin:auto;

}

在未知div宽高时,用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,632评论 1 45
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,508评论 0 5
  • 文 | 林书薇 图 | 摄图网 1 顾锦安回到柳树村时,正值...
    四格格驿站阅读 615评论 0 51
  • 不知道从什么时候开始,“开得起玩笑”变成了生活在这个世界上的必备标准。 别人对你说了很过分的话,你想要生气,想要反...
    糯米奶茶团子阅读 15,401评论 20 17