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

Question

1.问题

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

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

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

Answer 1

<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>

Answer 2

媒介查询，按不同宽度写不一样的css

Answer 3

都flex了不用判断尺寸了吧， 设置每一项不压缩， 定义换行规则， 尺寸不够就自动换行了。

Answer 4

这个简单啊，用媒体查询，宽屏的时候

    flex-direction: row;  

平板的时候

    flex-direction: column;