Question

是否有任何机制可以在flexbox的交叉轴上为布局指定flex- *样式属性？

我有一个布局，包括两个水平对齐的框，最小宽度在可变宽度的柔性框中。当容器太小而无法容纳两个盒子时，右侧盒子会缠绕到容器的底部。左侧框保持一定的大小，直到发生缠绕，此时它会增长以填充容器的宽度。我用以下CSS实现了这个目标：

#container {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

#left {
    flex: 1 0 200px;
}

#right {
    flex: 1000 0 200px;
}

通过设置200px的基础和0的缩小，这使得左框的最小宽度为200px，并且通过设置小的增长值而不是右框中的大的增长值，右框将填充剩余的空间而左边的基本上不会改变大小。我以这种方式排列数字，因为当容器小于400px时，右侧盒子环绕容器的下半部分，此时左侧盒子的增长值是无争议的，并且它会增长到容器的整个大小。

我遇到的问题是横轴上产生的尺寸。如果右边的框填满了内容，它会开始溢出容器，当我需要它开始滚动时。我似乎能够在这里做的最好的事情是在容器上设置一个溢出y，它会滚动整个容器，包括左边的盒子。设置最大高度为100％仍然相对于容器的整个高度，并且设置任何其他高度值会影响未包装时盒子的高度，我需要将其拉伸到整个长度。

您可以在this fiddle看到效果。当容器小于400px时，蓝色盒子环绕。蓝色框的最小高度为200px，因此它满足要求，然后两个框伸展以填充剩余的垂直高度。但是当你单击足够时，蓝色框开始溢出，并且溢出y不能包含它，因为它上面没有明确的高度值。

基本上我想要的是flex设置中的相同值，但是对于横轴：

#left {
    cross: 1000 0 auto;
}

#right {
    cross: 1 0 200px;
}

这样，当没有换行时，它们都会拉伸以填充垂直空间，但是当换行发生时，右侧框的高度为200px，左侧框填充剩余的垂直空间。有没有办法实现这种效果，因为上述属性不存在？

Answer 1

这是一个示例，其中框滚动其内容但仍保留父级的高度。我认为给您带来问题的是您没有在父元素上指定高度。如果你想让蓝色框保持一定的高度，它的父级也需要指定一个高度值。

* {
  box-sizing: border-box;
}

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}

.cont {
  display: flex;
  height: 100%;
}

.col-1 {
  flex-basis: 50%;
  background: slategray;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
}

.col-2 {
  max-height: 100%;
  background: gray;
  color: #fff;
  flex-basis: 50%;
  overflow: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.col-2::-webkit-scrollbar {
  display: none;
}

.scroll-cont {
  padding: 30px;
}

<div class="cont">
  <div class="col-1">
    heel, boy
  </div>
  <div class="col-2">
    <div class="scroll-cont">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
    </div>
  </div>
</div>

Answer 2

如您所知，在低于400px时您需要其他行为，您可以使用媒体标签来改变弹性流的方向。然后，您可以使用普通的flex属性来设置值。

@media (max-width: 399px) {
  body {
    flex-direction: column;
  }

  #left {
    cross: 1000 0 auto;
  }

  #right {
    cross: 1 0 200px;
    overflow: auto;
  }
}

与此答案无关，但在处理Flexbox问题时提供了很好的帮助，以及关于存在哪些Flex属性的问题是“Flexbox的完整指南”，请参阅CSS-Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

为每个弹性项目设置不同的弹性增长值，以使它们相对彼此增长。

.item {
flex-grow: 1;   
}
.item-1 {
flex-grow: 2;
}

指定flexbox交叉大小增长值

3 个答案: