如何使用CSS设置具有不等宽度元素的flexbox布局？

可以使用CSS中的flex属性来设置flexbox的宽度。flex属性是flex-grow、flex-shrink和flex-basis属性的组合，用于设置flexbox的长度。flex属性的性能非常灵敏，移动友好；很容易定位子元素和主容器。

页边距不会随内容页边距而塌陷。任何元素的顺序都可以在不编辑万博manbetx平台部分的情况下轻松更改。但很少有时候我们有一个不相等的元素宽度，那么你可以在CSS部分设计整个东西。

语法：

flex: number;

注意：在这种情况下，元素宽度取决于窗口的其他元素和屏幕。

示例1：使用CSS设置两种类型的宽度flexbox

<!DOCTYPE 万博manbetx平台>
<万博manbetx平台>

	<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>
</万博manbetx平台>

效果图：

0f23d607b74f97e842be4c6ed8eae7d.png-600

示例2：设置4种宽度类型的flexbox

<!DOCTYPE 万博manbetx平台>
<万博manbetx平台>

	<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>

</万博manbetx平台>

效果图：

efe847c7050d595908efb6b2fd37c10.png-600

以上就是如何使用CSS设置具有不等宽度元素的flexbox布局？的详细内容，更多请关注万博manbetx平台中文网其它相关文章！

如何使用CSS设置具有不等宽度元素的flexbox布局？

相关文章

评论抢沙发

常见问题

置顶推荐

猜你喜欢

相关教程章节

推荐视频教程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏