数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究Flexbox 的 `min-width` 和 `max-width` 声明在 Safari 上不起作用？为什么？
为了使 Flexbox 在所有 网络浏览器 上都能正常工作，请使用 min-width 和 max-width 的 Flex 等效项。例如，对于以下情况 -
min-width: 40%; max-width: 40%;
使用 CSS 简写属性。它将 flex-grow | flex-shrink | flex-basis 指定为如下语法所示 -
flex: flex-grow flex-shrink flex-basis|auto;
对于上述情况，我们可以设置 Flex 为 -
flex: 0 0 40%;
现在让我们来看一个在所有网络浏览器上都能正常工作的 Flexbox 示例。我们在父 div `parentBox` 内有两个 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;
}
对于子元素，即 `childBox`，我们再次使用了简写属性来设置弹性项目上的弹性长度 -
.childBox {
flex: 1 1 50%
background-color: green;
color: white;
border: 1px solid blue;
}
上面 .childBox 中的嵌套子元素设置为 Flex。这以及以上内容嵌套了 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>
输出
更新于: 2023-11-24
2K+ 次浏览
广告