flexbox - css使用flex处理不同宽度屏幕上的布局

问题描述

问 题

1.问题

想显示3块内容，希望宽屏时（比如PC上）按行排开显示：

希望窄屏（比如平板上）按列排开显示

希望使用flex来做，不想用bootstrap。flex怎样判断不同屏幕尺寸呢？

解决方案

<style type="text/css">
    *{margin: 0; padding: 0;}
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        vertical-align: center;
        flex-wrap: wrap;
        align-content: center;
    }
    .row {
        display: flex;
        align-items:stretch;
        flex:auto;
        background-color: red;
    }
    .item {
        display: flex;
        height: 150px;
        flex:0 0 33%;
        align-items:center;
        justify-content:center;
        border: 1px solid #000;
    }
    @media screen and (max-width: 600px) {
        .row {
            flex-direction: column;
        }
    }
</style>

<div class="row">
    <div class="item">1/3</div>
    <div class="item">1/3</div>
    <div class="item">1/3</div>
</div>

这篇关于flexbox - css使用flex处理不同宽度屏幕上的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！