flex容器主轴上的部分元素单独设置位置

最新推荐文章于 2024-05-08 11:06:58 发布

weixin_33976072

最新推荐文章于 2024-05-08 11:06:58 发布

阅读量4.1k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ce9614f6fb9a07edf272078

版权

就是利用主轴上的需要单独设置位置的元素填充剩下的空间，然后将其设置成flex容器，它的子元素就可以靠其他位置了

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			margin: 0;
		}
		ul {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.top-bar {
			font-size: 20px;
			line-height: 3;
			color: #fff;
			background-color: darkcyan;
		}
		.container {
			max-width: 1200px;
			margin: 0 auto;
		}
		.top-bar-content {
			display: flex;
		}
		.logo {
			margin-right: 4em;
		}
		.menu-list {
			display: flex;
		}
		.menu-list > li {
			margin-right: 2em;
		}
		.other-option {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
		}
		.contact {
			margin-right: 2em;
		}
	</style>
</head>
<body>
	<div class="top-bar">
		<div class="container">
			<ul class="top-bar-content">
				<li class="logo">logo</li>
				<li>
					<ul class="menu-list">
						<li>首页</li>
						<li>产品</li>
						<li>服务</li>
					</ul>
				</li>
				<li class="other-option">
					<div class="contact">联系我们</div>
					<div>登录</div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>复制代码

weixin_33976072

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex容器主轴上的部分元素单独设置位置

就是利用主轴上的需要单独设置位置的元素填充剩下的空间，然后将其设置成flex容器，它的子元素就可以靠其他位置了<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> body ...
复制链接

扫一扫