Question

我正在建立一个个人网站，并且一直在使用很多flexbox来获得我想要的布局。我最近遇到了一个似乎无法解决的问题。 flexbox容器中的项目似乎溢出到其他容器中，例如我的标头容器或页面结束处的底部。

<div class="main-container">
    <div class="header">
        <h1>John Doe</h1>
        <h2>Test</h2>
    </div>
    <div class="content-container">
        <div class="projects">
    <div class="content-container">
        <div>
            <h1>project</h1>
            <p>project text</p>
        </div>
        <div>
            <h1>project</h1>
            <p>project text</p>
        </div>
        <div>
            <h1>project</h1>
            <p>project text</p>
        </div>
        <div>
            <h1>project</h1>
            <p>project text</p>
        </div>
    </div>
</div>
    </div>
</div>

https://codepen.io/anon/pen/XYBbgE

我想在项目部分使用flexbox布局，以便将内容居中，并且我喜欢使用flexbox做到这一点很容易。如果通过增加高度或减小高度来调整代码笔容器的高度，则可以看到标题隐藏了某些元素。

我包括了一些HTML以显示布局。为了节省空间，我已经排除了很多东西，但是codepen链接更接近实际设计。

编辑：我制作了一张gif文件，演示了我遇到的问题

gif of flexbox problem

如您所见，当我调整高度时，页面的标题似乎掩盖了其下方的某些项目。如果可以的话，我也不能滚动到高于高度的位置。

Answer 1

要指出您的错误，这是项目的对齐方式，对于已对齐的所有元素，它都垂直居中。因此它似乎不在容器中，因为它的高度大于视口。您可以通过from textwrap import dedent as D ... class IntField(Field): type_ = int class StrField(Field): type = str ... _SENTINEL = object() def _check_attrs(**kwargs): self = kwargs.pop("self") for name, _ in self._required_properties: try: value = kwargs.pop(name) except KeyError: raise RequiredAttributeError("Required %s is missing" % name) else: setattr(self, name, value) for name, _ in self._optional_properties: value = kwargs.pop(name) if value is not _SENTINEL: setattr(self, name, value) if kwargs: raise InvalidAttributeError("Invalid items ") class PropertiesCreator(type): def __new__(mcs, classname, baseclasses, props): c_props = props.get('_required_properties', ()) for name, cname in c_props: props[name] = cname() required = ", ".join(f"{name}:{cname.type_}" for name, cname in c_props) optional = [] c_props = props.get('_optional_properties', ()) for name, cname in c_props: props[name] = cname() optional.append(( optional = ", ".join(f"{name}:{cname.type_}={_SENTINEL}" for name, cname in c_props) namespace = {"_check_attrs": _check_attrs} exec(D(f"""\ def __init__(self, *, {required}, {optional}): _check_attrs(locals()) """)) props["__init__"] = namespace["__init__"] return super(PropertiesCreator, mcs).__new__(mcs, classname, baseclasses, props) class CheckpointSchema(Schema, metaclass=PropertiesCreator): # Sorry - we are 18 months away from python 2 EOL . # Do you really need Python 2 compatibility in a new project thic complex? _required_properties = ( ("name", StrField), ("is_enabled", BoolField) ) # Leave __init__ undefined. # if you need more code to run on `__init__`, the metaclass will # get a lot more complicated - maybe change th emetaclass to # make use of `__new__` to init the properties, instead # and leave `__init__` alone.修复为align-items: center;

align-items: flex-start;

并且要让您知道，我认为您对没有它就可以轻松实现的所有事情都使用了flex

Flexbox项目溢出到标题中

1 个答案: