Question

我在使用CSS中的flex时遇到了一些麻烦，以便按照我希望的方式调整我的div。下图显示了我希望如何设置

以上是我上传的所有CSS和HTML as a fiddle以及代码段

    @font-face {
			font-family: Comfortaa;
			src: url("Comfortaa-Light.ttf") format("truetype");
		}

		@font-face {
			font-family: Neue;
			src: url("HelveticaNeue-Thin.otf") format("opentype");
		}

		body {
			position: absolute;
			margin: 0px;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			overflow-y: scroll;
			overflow-x: hidden;

			background-color: white;
		}

		#topSegment {
			position: relative;
			display: flex;
			flex-flow: row wrap;
			width: 100%;
			height: 600px;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			background: purple; /* For browsers that do not support gradients */
			background: -webkit-linear-gradient(left top, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Safari 5.1 to 6.0 */
			background: -o-linear-gradient(bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Firefox 3.6 to 15 */
			background: linear-gradient(to bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* Standard syntax */
		}

		#frontLogo {
			width: 369.9px;
			height: 350px;
			margin: 125px;		
		}

		#searchBar {
			flex: 1;
			margin-right: 125px;
			margin-left: 0px;
			margin-top: 75px;
			margin-bottom: 75px;
			background-color: rgb(74,74,74);
			height: 50px;
			border-radius: 25px;
		}

		#weatherInformation {
			flex: 1;
			margin: 125px;
			margin-left: 0px;		
		}

		#weatherInformation p{
			margin: 0px;
			font-family: 'Open Sans', sans-serif;
			font-weight: 300;
			color: white;
			font-size: 2em;
		}

		#underline {
			margin: 0px;
			padding: 0px;
			width: 0%;
			visibility: hidden;
			animation-name: expand;
			animation-delay: 0.75s;
			animation-duration: 0.8s;
			animation-timing-function: ease-in-out;
			-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
			animation-fill-mode: forwards;
		}

		@keyframes expand {
			from {
				width: 0%;
			}
			to {
				width: 100%;
				visibility: visible;
			}
		}

		#gradient {
			position: absolute;
			width: 100%;
			height: 10px;
			bottom: 0px;
			left: 0px;

			background: white; /* For browsers that don't support gradients */
			background: -webkit-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Safari 5.1-6*/
			background: -o-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Opera 11.1-12*/
			background: -moz-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Fx 3.6-15*/
			background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0)); /*Standard*/
		}

		#content {
			display: flex;
			width: 100%;
			height: 900px;

			background-color: white;
		}


		/* Custom Scrollbar CSS */

		::-webkit-scrollbar {
			width: 10px;
		}
		::-webkit-scrollbar-track {
			background: rgba(255,255,255,1);
			-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
			-webkit-border-radius: 50px;
			border-radius: 50px;
		}
		::-webkit-scrollbar-thumb {
			-webkit-border-radius: 10px;
			border-radius: 10px;
			background: rgba(150,150,150,1);  
		}
		::-webkit-scrollbar-thumb:window-inactive {
			background: rgba(150,150,150,0.6); 
		}

<body>
	<div id="topSegment">
		<a href="index.html">
			<img src="Weather%20Icon.svg" alt="CGS Weather Icon" id="frontLogo" >
		</a>
		<div id="searchBar">
			<div id="outer">
				
			</div>
		</div>
		<div id="weatherInformation">
			<p>CAMBERWELL, MELBOURNE</p>
			<hr id="underline">
			<p>28&deg;</p>
		</div>
		<div id="gradient"></div>
	</div>
	<div id="content"></div>
</body>

我确信它有一些非常简单的解决方案，使用几行来处理flex，但我似乎无法弄清楚它们是什么......

Answer 1

peopje，我不同意！ Flex是完美的！（免责声明：我是Flex福音传播者，因此Flex非常适合所有事情。）; - ）

我用你的图表构建了一个解决方案。您在左侧窗格中要求的内容是不可能的。您有固定高度的边距和固定高度的徽标，但希望该区域是屏幕的整个高度。看到问题？ SOMETHING必须在那里变化。

所以....我使用了两个弹性填充面板 - 一个顶部，一个位于Logo容器下方，使徽标垂直居中，同时垂直填充屏幕。我非常确定视觉效果符合您的预期。

其他一切正是您所要求的。

注意：我在CSS表的底部给了你一大块CSS，你可以在所有项目中复制粘贴重用来进行CSS Flex管理。 Flex是非常强大的，那些少量的CSS类将工作简化为无关紧要。

警告：它很丑陋！我把所有东西都放在一边，这样你就可以看到究竟发生了什么，所以它看起来很糟糕。您当然会删除/注释掉边框以供实际使用。不过，边界在开发过程中非常有用。

你走了！ https://jsfiddle.net/brebey/ya8rea0f/2/

我在这里也有一个更通用的Flex盒子演示。它展示了如何在任何位置（顶部/中心/底部）使用可变宽度窗格，然后在其中（从顶部/中间/底部）到底部（标题/内容/页脚布局）如此常见的三窗格布局（在可变高度内容窗格中，它显示了在同样常见的从左到右布局（菜单/内容/广告等）中完成的相同操作。如果您有兴趣，请点击这里。 https://jsfiddle.net/brebey/sm4amanj/

灵活方框的神奇之处在于它们是CSS中唯一可以让您自由地为任何Flex DIV添加填充，边框和/或边距的机制，它们可以按预期工作，而不会产生猖獗的滚动条。上面的演示显示通过复选框可以打开/关闭装饰。

**如果这有助于您，请接受/向上投票答案！ **

注意：我只为你做了Flex / Geometry部分;看起来你对方程的背景/边框/颜色部分有很好的处理。如果您需要帮助获得正确的背景/透明/不透明序列设置为您正在寻找的效果，请回头，我会帮您解决。

/* */

CSS：具有3个div的Flex容器

1 个答案: