在图像下方构建包含产品信息的产品页面.是否灵活

Question

我正在尝试构建一个产品页面来练习html和css。尽管我在举一个例子，但我对flex的例子感到困惑。

示例：https://css-tricks.com/designing-a-product-page-layout-with-flexbox/

我的代码：https://jsfiddle.net/rhtb8q3k/

我希望产品信息在产品图片下方，确切地说是他们在夹克图片中的信息。product-card是一个同时具有图像和产品信息的容器。他们有：

.product-card {
padding: 2%;
flex-grow: 1;
flex-basis: 16%;
display: flex;
}

但当我有display: flex;时，产品信息就在图片旁边。如果我删除它，文本将显示在图像下方。我的代码和示例之间有什么区别？我也看不到text-align或flex-direction。

Answer 1

使用flex执行此操作是正确的。您只缺少flex-direction属性。

可用选项有：row和column。Row将有一个东西挨着另一个，在一行中——所以事情从左到右。Column将从上到下显示堆叠的东西。还有一些相反的变体：row-reverse和column-reverse，它们的作用正如您所期望的那样。

此属性的默认值(当您没有在代码中指定它时(是row，所以这就是为什么您的产品图像显示在产品数据的左侧。

所以，如果你添加

flex-direction: column;

对于您的.product-card，产品数据将显示在产品图像下方。

附带说明一下，更改此属性将更改柔性元件的主轴和横轴，这意味着justify-content和align-items的行为将有所不同。你没有具体问过这件事，但你可能想在下面读一读：https://codeburst.io/understanding-basic-concepts-of-css-flexbox-ffa657dc39c1.