Flexbox 的最小宽度和最大宽度声明在 Safari 上不起作用？为什么？

很酷的站长

于 2023-01-03 22:49:08 发布

阅读量209

点赞数

分类专栏：编程笔记文章标签： safari css css3

原文链接：https://s.10zhan.com/art/165.html

版权

编程笔记专栏收录该内容

554 篇文章 18 订阅

订阅专栏

文章介绍了如何使用CSS的flex属性确保弹性框在所有Web浏览器上兼容，包括使用flex-grow,flex-shrink和flex-basis的速记属性。示例展示了如何为父容器和子元素设置样式，以创建灵活的布局结构。

摘要由CSDN通过智能技术生成

要使弹性框在所有 Web 浏览器上运行，请使用 flex 的最小宽度和最大宽度等效值。例如，对于这个 -

<span style="color:#000000">min-width: 40%;
max-width: 40%;
</span>

使用 CSS 速记属性。它指出灵活生长|柔性收缩|弹性基础，如以下语法所示 -

<span style="color:#000000">flex: flex-grow flex-shrink flex-basis|auto;
</span>

对于上述内容，我们可以将 Flex 设置为 -

<span style="color:#000000">flex: 0 0 40%;
</span>

现在让我们看看一个适用于所有 Web 浏览器的 Flexbox 示例。我们的父 div 父框内有两个 div -

<div class='parentBox'> <div class='childBox'> <div class='babyChildBox'>Parent's Child </div> <div class='babyChildBox'>Parent's Child </div> </div> <! - - - !--> </div>

父容器的样式。我们使用了 CSS Flex 速记属性 -

.parentBox { display: flex; flex: 1 0 100%; background-color:yellow; border: 3px solid skyblue; }

对于 child，即 childBox，我们再次使用速记属性来设置灵活项目的灵活长度 -

.childBox { flex: 1 1 50% background-color: green; color: white; border: 1px solid blue; }

上述 .childBox 中的嵌套子项是使用 Flex 设置的。这个和上面的嵌套了弹性容器 -

.babyChildBox { flex: 1 1 50%; background-color: orange; }

例

这是完整的示例 -

<!DOCTYPE html> <html> <head> <style> .parentBox { display: flex; flex: 1 0 100%; background-color:yellow; border: 3px solid skyblue; } .childBox { flex: 1 1 50% background-color: green; color: white; border: 1px solid blue; } .babyChildBox { flex: 1 1 50%; background-color: orange; } </style> </head> <body> <h1>Implementing Flex </h1> <div class='parentBox'> <div class='childBox'> <div class='babyChildBox'>Parent's Child </div> <div class='babyChildBox'>Parent's Child </div> </div> <div class='childBox'> <div class='babyChildBox'>Parent's Child </div> <div class='babyChildBox'>Parent's Child </div> </div> </div> </body> </html>

输出

很酷的站长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flexbox 的最小宽度和最大宽度声明在 Safari 上不起作用？为什么？

现在让我们看看一个适用于所有 Web 浏览器的 Flexbox 示例。我们的父 div 父框内有两个 div -要使弹性框在所有 Web 浏览器上运行，请使用 flex 的最小宽度和最大宽度等效值。上述 .childBox 中的嵌套子项是使用 Flex 设置的。这个和上面的嵌套了弹性容器 -对于 child，即 childBox，我们再次使用速记属性来设置灵活项目的灵活长度 -使用 CSS 速记属性。我们使用了 CSS Flex 速记属性 -对于上述内容，我们可以将 Flex 设置为 -
复制链接

扫一扫