Html 了解Flexbox如何与引导一起工作

我有以下HTML和CSS布局：

html{
位置：相对位置；
最小高度：100%；
}
身体{
/*按页脚高度排列的页边距底部*/
边缘底部：100px；
}
.col-md-6{
显示器：flex；
证明内容：中心；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*vh是指视口高度。非常有用*/
高度：100vh；
宽度：100%；
}

第1栏
第2栏

您需要将

flex:1

赋给

.row

，它是

flex-grow

的缩写，

flex-short

和

flex-basis

的组合。默认值为

0 1 auto

，使用

flex:1

表示它将是

1 1 0

html{
位置：相对位置；
最小高度：100%；
}
身体{
/*按页脚高度排列的页边距底部*/
边缘底部：100px；
}
.行{
弹性：1
}
.col-md-6{
显示器：flex；
证明内容：中心；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*vh是指视口高度。非常有用*/
高度：100vh；
宽度：100%；
}

第1栏
第2栏

删除行元素时，

.col

元素将成为您的弹性项。为了让flex项目包装在flex容器中，您需要使用

flex wrap

属性。然而，我并不认为删除row元素并使用flex-wrap是您真正想要的

关于你的问题。在第一个示例中，它看起来很短的原因是您将

行

元素设置为“flex项”。行项目的宽度将根据其内容调整大小，因为您尚未设置控制其大小的flex属性。正确设置flex属性后，您将看到所需的结果：

.container\u flex{
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*vh表示视口高度。非常有用！*/
高度：100vh；
宽度：100%；
}
.行{
弹性：1；
}

第1栏
第2栏

您也可以使用bootsrap中的flex内置库（它也会响应）：

.col-md-6.col-xs-12{border:solid}/*在bootsrap:）中默认情况下不设置CSS需要原因边框*/

要并排查看col，请在整页模式下运行代码段，并将其减小到平均720px宽度，以查看col堆叠

第1列
第2列