Html Flexbox配置

我有以下html标记。我希望h1标签能够包含整个页面（100%）和三篇文章，并使用flexbox显示在一行中。如果需要，图像应缩小以适合行

#内容{
保证金：0；
填充：0；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
#含量>h2{
弹性：01100%；
}
#内容>文章{
填充物：5px；
边框：1px实心#CC33；
背景:#dd88；
弹性：1050%；
}

特色作品

您需要在

h1

元素上设置

flex:0 100%

，在图像元素上设置

最大宽度：100%

#内容{
保证金：0；
填充：0；
显示器：flex；
柔性包装：包装；
}
#内容>h1{
弹性：0.100%；
}
#内容>文章{
填充物：5px；
边框：1px实心#CC33；
背景:#dd88；
弹性：1；
}
img{
最大宽度：100%；
}

特色作品

您需要在

h1

元素上设置

flex:0 100%

，在图像元素上设置

最大宽度：100%

#内容{
保证金：0；
填充：0；
显示器：flex；
柔性包装：包装；
}
#内容>h1{
弹性：0.100%；
}
#内容>文章{
填充物：5px；
边框：1px实心#CC33；
背景:#dd88；
弹性：1；
}
img{
最大宽度：100%；
}

特色作品

老实说，我会把

h1

标签放在flexbox的外面。这让事情变得简单多了。下面是一个工作示例：

#内容{
保证金：0；
填充：0；
显示器：flex；
弯曲方向：行；
}
#内容>文章{
填充物：5px；
边框：1px实心#CC33；
背景:#dd88；
弹性：1；
}

特色作品

老实说，我会把

h1

标签放在flexbox的外面。这让事情变得简单多了。下面是一个工作示例：

#内容{
保证金：0；
填充：0；
显示器：flex；
弯曲方向：行；
}
#内容>文章{
填充物：5px；
边框：1px实心#CC33；
背景:#dd88；
弹性：1；
}

特色作品

#内容{
显示器：flex；
柔性包装：包装；
对齐内容：flex start；/*1*/
最小高度：800px；
保证金：0；
填充：0；
}
#含量>h2{
弹性：0 100%；/*2*/
}
#内容>文章{
弹性：130%；/*3*/
文本对齐：居中；
填充物：5px；
边框：1px实心#CC33；
背景:#dd88；
}
img{
最大宽度：100%；/*4*/
}

特色作品

#内容{
显示器：flex；
柔性包装：包装；
对齐内容：flex start；/*1*/
最小高度：800px；
保证金：0；
填充：0；
}
#含量>h2{
弹性：0 100%；/*2*/
}
#内容>文章{
弹性：130%；/*3*/
文本对齐：居中；
填充物：5px；
边框：1px实心#CC33；
背景:#dd88；
}
img{
最大宽度：100%；/*4*/
}

特色作品