Flexbox布局 - 四个DIVS +全高清DIV

Question

我试图用flex-box实现这种布局，但我似乎遇到了一些问题，黑色空间只是一个全高度div;

正如您所看到的，这是目前的样子;

HTML

public class imagen1 extends Activity {
    public float init_x;
    private ViewFlipper vf;

    int gallery_grid_Images[] = {R.drawable.fondo, R.drawable.fondo2, R.drawable.fondo3,
            R.drawable.fondo4, R.drawable.fondo5
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.imagen1);
        ImageView imagePreview = (ImageView) findViewById(R.id.preview);

        vf = (ViewFlipper) findViewById(R.id.viewFlipper);
        for (int i = 0; i < gallery_grid_Images.length; i++) {
            //  This will create dynamic image view and add them to ViewFlipper
            setFlipperImage(gallery_grid_Images[i]);
        }
        vf.setOnTouchListener(new ListenerTouchViewFlipper());

    }

    private void setFlipperImage(int res) {
        Log.i("Set Filpper Called", res + "");
        ImageView image = new ImageView(getApplicationContext());
        image.setBackgroundResource(res);
        vf.addView(image);
    }

    public void compartir (View v) {

        Uri newUri2 = Uri.parse("android.resource://" + getPackageName()
                + "/drawable/" + gallery_grid_Images);
        Intent shareIntent = new Intent();
        shareIntent.setAction(Intent.ACTION_SEND);
        shareIntent.putExtra(Intent.EXTRA_TEXT, "");
        shareIntent.putExtra(Intent.EXTRA_STREAM, newUri2);
        shareIntent.setType("image/jpg");
        shareIntent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
        startActivity(Intent.createChooser(shareIntent, "Compartir"));

    }
}

CSS

<div class="parent-container">
        <div class="cm-text child33">
            Developments must<br/>
            consider the<br/>
            connection of retail<br/>
            with adjacent spaces<br/>
            by focusing on<br/>
            communicating with<br/>
            people as communities<br/>
            contribute in making a<br/>
            sense of place by<br/>
            generating life and<br/>
            animation.
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_01.jpg)'}"></div>
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_02.jpg)'}"></div>
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_03.jpg)'}"></div>
        </div>
        <div class="child33" >
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_04.jpg)'}"></div>
        </div>
    </div>

我不太确定我哪里出错了我知道我需要在左手边的全高度上设div，但我对如何接近布局感到有些困惑使用行和换行然后调整宽度和最大宽度？或者我使用包裹的列？非常感谢指导。

Answer 1

你应该添加：

justify-content: flex-end;

到您的.parent-container，这些区块将位于视口右侧。

.parent-container {
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vh;
  width: 100vw;
  background-color: #000;
}

.child33 {
  background-color: royalblue;
  border:1px solid #000;
  position: relative;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 50%;
  width: 33.3%;
  max-width: calc(100% * (1/3));
  margin: 0;
  position: relative;
  -ms-flex-flow: nowrap row;
  -o-flex-flow: nowrap row;
  flex-flow: nowrap row;
}

<div class="parent-container">
      <div class="cm-text child33">
        Developments must<br/>
        consider the<br/>
        connection of retail<br/>
        with adjacent spaces<br/>
        by focusing on<br/>
        communicating with<br/>
        people as communities<br/>
        contribute in making a<br/>
        sense of place by<br/>
        generating life and<br/>
        animation.
      </div>
      <div class="child33">
        <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_01.jpg)'}"></div>
      </div>
      <div class="child33">
        <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_02.jpg)'}"></div>
      </div>
      <div class="child33">
        <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_03.jpg)'}"></div>
      </div>
      <div class="child33" >
        <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_04.jpg)'}"></div>
      </div>
    </div>

Answer 2

主要问题是您需要使用flex-direction: column;。我还删除并调整了一些其他属性，最值得注意的是在cm-text上将高度设置为100％

＆＃13;

＆＃13;

html, body {
  margin: 0;
}
.parent-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  width: 100vw;
}
.cm-text.child33 {
  height: 100%;
  background: black;
  color: white;
}
.child33 {
  height: 50%;
  width: 33.3%;
  max-width: calc(100% * (1/3));
}
.img-wrapper {
  height: 100%;
  width: 100%;
  background: no-repeat center center / cover;
}

＆＃13;

<div class="parent-container">
  <div class="cm-text child33">
    Developments must<br/>
    consider the<br/>
    connection of retail<br/>
    with adjacent spaces<br/>
    by focusing on<br/>
    communicating with<br/>
    people as communities<br/>
    contribute in making a<br/>
    sense of place by<br/>
    generating life and<br/>
    animation.
  </div>
  <div class="child33">
    <div class="img-wrapper" style='background-image: url(http://lorempixel.com/100/100/city/1)'></div>
  </div>
  <div class="child33">
    <div class="img-wrapper" style='background-image: url(http://lorempixel.com/100/100/city/3)'></div>
  </div>
  <div class="child33">
    <div class="img-wrapper" style='background-image: url(http://lorempixel.com/100/100/city/2)'></div>
  </div>
  <div class="child33" >
    <div class="img-wrapper" style='background-image: url(http://lorempixel.com/100/100/city/4)'></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;