Flexbox协助

Question

我目前正在练习Flexbox，并尝试在我的网站上进行此布局，它具有两个图像（垂直1个和水平1个）和一块文本，我希望它看起来像图像，但似乎找不到解决方法< / p>

Container image

Answer 1

我同意CSS网格更适合于创建网格布局的意见。但是，为了回答您的问题，请在下面查看使用Flexbox的示例。

import numpy as np
from types import ModuleType

class Function(np.ndarray):

    def __new__(cls, space, dim=None, array=None):
        if array is None:
            self = space.array(dim=dim).view(cls)
        else:
            self = array.view(cls)
        self.space = space
        return self

    def index(self, i):
        return Function(self.space, array=self[:, i])

    def __call__(self, bc, index=None):
        space = self.space
        return space.value(self, bc, index=index)

    def value(self, bc, index=None):
        space = self.space
        return space.value(self, bc, index=index)

    def __getattr__(self, item):
        def wrap(func):
            def outer(*args,  **kwargs):
                val = func(self, *args, **kwargs)
                return val
            outer.coordtype = func.coordtype
            return outer 
        if hasattr(self.space, item):
            self.__dict__[item]= wrap(getattr(self.space, item))
            return self.__dict__[item]
        else:
            print('The function space has not implemented method {}'.format(item))

.container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 300px;
}

.left {
  background-color: #aaa;
  flex: 1;
}

.right {
  display: flex;
  flex: 2;
  flex-direction: column;
}

.top {
  background-color: #bbb;
  flex: 1;
}

.bottom {
  background-color: #ccc;
  flex: 1;
}