css Flexbox：在收缩时切换卡片文本轴答案

【问题标题】：css Flexbox: switch card text axis on shrinkcss Flexbox：在收缩时切换卡片文本轴
【发布时间】：2020-03-27 21:42:09
【问题描述】：

我有一张卡片，即一个带有图像和文本区域的组件，我想在更大的屏幕上水平显示（img-area -> text-area）和垂直显示（img-area 下的文本区域）在较小的屏幕上。

如果我缩小页面尺寸，我可以让文本区域换行到新行，但是有一点文本区域比图像更宽，导致不想要的效果。我希望文本区域立即跳转到图像下方。

Portfolio.js 渲染

            <div className="property">
                <div className="property-img">
                    <img src="/brick_wall.jpg" />
                </div>                       
                <div className="property-text">
                    <h1>Lorem Ipsum</h1>
                    <h3>Lorem Ipsum</h3>

                    <p>Lorem ipsum ...</p>
                </div>
            </div>

Portfolio.css

.property {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-shadow: 0 0 7px #333;
  margin: 20px;
}

.property-img {
  display: flex;
  flex-direction: column;
  flex-basis: 500px;
}

.property-img img {
  max-width: 100%;
  max-height: 100%;

  align-self: flex-start;
  flex-grow: 2;
  flex-shrink: 2;

}


.property-text{
    background: white;
    padding: 20px 20px;
    flex-basis: 480px;
    flex-grow: 2;
    flex-shrink: 2;
}

【问题讨论】：

我理解正确吗，您想从屏幕 1 移动到屏幕 3？
@ElmanHuseynov 是的
请检查我的答案

标签： html css reactjs flexbox

【解决方案1】：

尝试对左右列使用固定宽度：50% 而不是 flexbox 拉伸，然后在需要一个在另一个之下时使用媒体查询使其 100%。此外，您可以使用 background-image 属性而不是图像标签来加载左侧列中的图像。

【讨论】：