Question

我有这个HTML

<div class="flex-container">
    <div class="flex-full">1</div>
</div>

<div class="flex-container">
    <div class="flex">2</div>
    <div class="flex">3</div>
    <div class="flex">4</div>
</div>

由此CSS设计

    *{
    margin:0;
    padding:0;
}
    .flex-container{
        width: 90%;
        max-width: 960px;
        display: flex;
        background-color: lightgray;
        margin-left: auto;
        margin-right: auto;
        flex-wrap: wrap;
    }
    .flex-full{
        background-color: red;
        flex: 1 0 100%;
    }
    .flex{
        background-color: blue;
        flex: 1 0 90px;
    }

    @media screen and (max-width: 480px) {
    .flex-container {
        background-color: lightgreen;
        width: 100%;
    }
}
    @media screen and (max-width: 480px) {
    .flex-container {
        background-color: lightgreen;
        width: 100%;
    }
}

但结果并非如预期。我将尝试直观地呈现问题（上传图片不起作用）：

屏幕宽度为320px及以下，我得到以下结果

    111111111111111
    222222233333333
    444444444444444

我的期望是：

    phone screen          bigger screen
    111111111111111       111111111111111111
    222222222222222       222222333333444444
    333333333333333
    444444444444444

我希望它有所帮助，请帮帮我:)。

JSFiddle

Answer 1

您是否正在寻找flex-direction: column;？

on .flex-container。

Answer 2

在Flex中，您可以分别使用justify-content和align-content进行水平和垂直对齐。

同样flex-basis采用与width和height属性相同的值，并根据flex因子分配可用空间之前指定Flex项的初始主要大小。

.flex-container {
  flex-direction:         row;
  justify-content:        space-between;
  align-content:          space-between;
}

.flex1, .flex4{
  flex-basis:             100%;
}

.flex2, .flex3{
  flex-basis:             50%;
}

@media screen and (max-width: 320px){

  .flex2, .flex3{
    flex-basis:             100%;
  }

}

如果width: 100%，您也可以使用width: 50%和flex-basis。

Flexbox布局无法按预期工作

2 个答案: