Flexbox - 一个大型旁边的两个小物件

Question

我需要在移动设备上看到这样的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:clickable="true">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="30dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:textSize="15dp"
        android:textStyle="bold" />

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_profile"
             />

</LinearLayout>

在桌面上就像这样：

-----
| 1 |
-----
| 2 |
-----
| 3 |
-----

我决定使用flexbox，我的代码到目前为止：

---------
|   | 1 |
| 2 |---|
|   | 3 |
|   |----
|   |
-----

不幸的是，我无法在“1”下滑动列“3”。我该怎么办？

Codepen：http://codepen.io/tomekbuszewski/pen/PbprJP?editors=1100

Answer 1

您可以尝试将float用于桌面，并使用设置为移动设备order的Flexbox。

<强> jsFiddle

＆＃13;

＆＃13;

.item-1 {background:aqua;}
.item-2 {background:gold;}
.item-3 {background:pink;}

.row {
  overflow: hidden;
}
.item {
  width: 50%;
}
.item-2 {
  float: left;
}
.item-1,
.item-3 {
  overflow: hidden;
}
@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  .item {
    width: auto;
    float: none;
  }
  .item-1 {
    order: -1;
  }
}

＆＃13;

<div class="row">
  <div class="item item-2">2<br><br><br></div>
  <div class="item item-1">1</div>
  <div class="item item-3">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flex属性.third在右侧对齐justify-content。

你的CSS看起来像这样：

.row{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}

.row > div{
  flex: 0 0 50%;
}

要更改订单，您可以使用order属性：

.first{  order: 1; }
.second{ order: 2; }
.third{  order: 3; }

@media (min-width: 700px){
  .first{  order: 2; }
  .second{ order: 1; }
  .third{  order: 3; }
}

Check the fiddle

在CSS-tricks上，您可以找到使用Flex属性的精彩指南。

Answer 3

您可以使用float: right代替所有三个元素。与媒体查询中适当的宽度定义一起，这应该有效。

Answer 4

网格：

＆＃13;

＆＃13;

/* Column */
.item {
  width: 100%; 
}

/* Wrap */
.row {
  display: flex;
  flex-flow: column wrap;
}


/* Responsive */
@media screen and (min-width: 700px){
  .row {
    flex-flow: row wrap;
    justify-content: flex-end;
  }
  
  .item { width: 50%;}
  
  .item-1 { order: 2; }
  .item-2 { order: 1; }
  .item-3 { order: 3; }
}


/* Custom style */
.item {
  color: #fff;
  display: block;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 3rem;  
}

.item-1 {
  background: #00bcd5;
}

.item-2 {
  background:#8bc24a;
}

.item-3 {
  background:#fec107;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

带挂钩的

网格：

＆＃13;

＆＃13;

/* Column */
.item {
  width: 100%; 
}

/* Wrap */
.row {
  display: flex;
  flex-flow: column wrap;
}

.sub-row {
  display: none;
}

.item-1 { order: 1; }

.item-2 { order: 2; }

.item-3 { order: 3; }


/* Responsive */
@media screen and (min-width: 500px){
  .row {
    flex-flow: row wrap;
    justify-content: flex-end;
  }
  
  .sub-row {
    width: 50%;
    display: flex;
    flex-flow: column wrap;
  }
  
  .sub-row .item { width: 100%;}
  
  .item { width: 50%;}
  
  .hidden { display: none; }
  
  .item-2 { order: 1; }
  
  .sub-row  { order: 2; }
  
}


/* Custom style */
.item {
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 3rem;  
}

.item-1 {
  background: #00bcd5;
}

.item-2 {
  background:#8bc24a;
}

.item-3 {
  background:#fec107;
}

＆＃13;

<div class="row">  
  <div class="item item-2">2</div>
  <div class="sub-row">
    <div class="item item-1">1</div>
    <div class="item item-3">3</div>
  </div>
  
  
  <div class="item hidden item-1">1</div>
  <div class="item hidden item-3">3</div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

我只是为了演示而给出尺寸的东西很少但是它仍然可以在没有尺寸的情况下工作。

您需要为容器提供一个尺寸，但可以是100vh / 100vw甚至百分比而不是实际像素。

＆＃13;

＆＃13;

body {
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 600px;
  width: 100%;
}
.item-1,
.item-2,
.item-3 {
  width: 100%;
  font-size: 80px;
  color: #fff;
  text-align: center;
}
.item-1 {
  line-height: 100px;
  height: 100px;
  background: #00bcd5;
}
.item-2 {
  line-height: 200px;
  height: 200px;
  background: #8bc24a;
}
.item-3 {
  line-height: 300px;
  height: 300px;
  background: #fec107;
}
@media (min-width: 700px) {
  .item-1,
  .item-2,
  .item-3 {
    width: 50%;
  }
  .item-1,
  .item-3 {
    order: 1;
  }
  .item-2 {
    height: 100%;
    line-height: 1em;
  }
}

＆＃13;

<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这是你正在寻找的。

Answer 6

如何使用绝对位置？

在您的媒体查询中，将.row类更改为：

.row {
    position: relative;
    align-items: flex-end;
}

您的.item-2：

  .item-2 { order: 1; position: absolute; top: 0; left: 0; }

/* Column */
.item {
  width: 100%; 
}

/* Wrap */
.row {
  display: flex;
  flex-flow: column wrap;
}


/* Responsive */
@media screen and (min-width: 700px){
  .row {
    position: relative;
    align-items: flex-end;
  }
  
  .item { width: 50%;}
  
  .item-1 { order: 2; }
  .item-2 { order: 1; position: absolute; top: 0; left: 0; }
  .item-3 { order: 3; }
}


/* Custom style */
.item {
  color: #fff;
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 3rem;  
}

.item-1 {
  background: #00bcd5;
}

.item-2 {
  background:#8bc24a;
}

.item-3 {
  background:#fec107;
}

<div class="row">
  <div class="item item-1">1</div>
  <div class="item item-2">2
    <br>2</div>
  <div class="item item-3">3</div>
</div>

Revised Codepen