页边距不会随内容页边距而塌陷。任何元素的顺序都可以在不编辑HTML部分的情况下轻松更改。但很少有时候我们有一个不相等的元素宽度，那么你可以在CSS部分设计整个东西。
语法：
flex: number;
注意：在这种情况下，元素宽度取决于窗口的其他元素和屏幕。
示例1：使用CSS设置两种类型的宽度flexbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div.flexcontainer {
display: flex;
min-height: 200px;
font-size: 15px;
}
div.columns {
flex: 1;
padding: 10px;
}
div.columns:nth-of-type(even) {
flex: 2;
}
div.columns:nth-of-type(odd) {
background: #85929E;
color: white;
}
div.columns:nth-of-type(even) {
background: #A5DDEF;
color: green;
}
</style>
</head>
<body>
<center>
<div class="flexcontainer">
<div class="columns">这是第一列</div>
<div class="columns">这是第二列</div>
<div class="columns">这是第三列</div>
<div class="columns">这是第四列</div>
</div>
</body>
</html>效果图：
示例2：设置4种宽度类型的flexbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div.flexcontainer{
display: flex;
min-height: 200px;
font-size:15px;
border:2px solid orange;
}
div.columns{
padding: 10px;
color:white;
}
div.columns:nth-of-type(1){
flex: 0.5;
background: #1B2631;
}
div.columns:nth-of-type(2){
flex: 1;
background:#424949;
}
div.columns:nth-of-type(3){
flex: 2;
background:#4D5656;
}
div.columns:nth-of-type(4){
flex: 3;
background:#626567;
}
th, td{
border:1px solid white;
}
</style>
</head>
<body>
<center>
<div class="flexcontainer">
<div class="columns">这是第一列</div>
<div class="columns">这是第二列</div>
<div class="columns">这是第三列</div>
<div class="columns">这是第四列</div>
</div>
</body>
</html>效果图：
以上就是如何使用CSS设置具有不等宽度元素的flexbox布局？的详细内容，更多请关注0133技术站其它相关文章！
