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

爱被打了一巴掌 2022-01-20 07:37 479阅读 0赞

就是利用主轴上的需要单独设置位置的元素填充剩下的空间，然后将其设置成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>复制代码

发表评论取消回复

表情：

评论列表（有 0 条评论，479人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序样式Flex Box精通课程-Flex项目的属性-flex-basis项目占据的主轴空间

flex-basis项目占据的主轴空间微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/

缺乏、安全感/ 2024年02月19日 15:40/ 0 赞/ 4 阅读

相关 flex盒子布局 - 通过主轴和侧轴学习对齐方式

CSS Flexible Box Layout 就是css的弹性盒子布局，简称flex布局，相对于box布局来说，功能更多一些，使用起来也相对灵活。先了解一下方向轴的概念

旧城等待，/ 2023年06月25日 03:24/ 0 赞/ 15 阅读

相关计算元素的位置

元素位置的计算主要是一个相对的概念, 相对于父级元素, 相对于父级定位元素, 相对于body等. 所以元素分为了定位元素(position: 不是static)和普通元素(p

傷城~/ 2022年12月04日 06:29/ 0 赞/ 121 阅读

相关元素的绝对位置

//获取元素的纵坐标 function getTop(e)\{ var offset=e.offsetTop; if(e.offsetParent!=null)

系统管理员/ 2022年08月07日 03:36/ 0 赞/ 130 阅读

相关 IDEA单独设置JDK

我的系统里有1.7和1.8 2套JDK，但是我想单独给IDEA指定使用1.8，而平时系统使用的是1.7，那么可以在windows的环境变量里加入 64位 IDEA\_JKD\

我就是我/ 2022年07月16日 09:57/ 0 赞/ 150 阅读

相关 Flex入门基础——Flex布局、容器container的属性

1、作用：利用Flex可实现完美居中效果；例（1）——display:flex; （注意：无论父元素以何种比例递增，元素依旧保持水平居中） .contain

骑猪看日落/ 2022年07月15日 09:47/ 0 赞/ 258 阅读

相关提高篇——删除指定位置上的元素

问题描述: 删除指定位置上的元素。程序代码： include <stdio.h> define SIZE 100 /

╰半橙微兮°/ 2022年06月15日 08:21/ 0 赞/ 126 阅读

相关 CSS Flex布局设置解决元素居中的问题

本人不是专业前端，但项目中遇到了元素居中的问题，最后使用了Flex布局的如下设置解决了。 .box-card { display: f

梦里梦外;/ 2022年05月19日 06:49/ 0 赞/ 215 阅读

相关 CSS 父元素相对位置设置

父元素设置position: relative 子元素设置position: absolute 然后给子元素设置left和top调整位置。当然也可以用margin-top和

痛定思痛。/ 2022年03月18日 07:52/ 0 赞/ 294 阅读

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

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

爱被打了一巴掌/ 2022年01月20日 07:37/ 0 赞/ 480 阅读