- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 flex 容器,它沿着主轴的一行对齐子元素。我为它的 justify-content 设置了一个空格,以便在两个 div 之间保持一些空间。
我还给左边的 div 增加了 3,而右边的 div 保持不变为 1。
我的目标是在左侧显示一篇特色博客文章(因此 flex-grow 增加了 3)并在右侧显示侧边栏(因此 flex-grow 增加了 1)。我还希望两个 div 之间有空间。
我的代码不允许两个 div 共享它们之间的空间,因为它们彼此相邻。
这是我的代码:
<body>
<nav role="navigation">
<ul>
<li><a href="articles.htm" title="Articles">Articles</a></li>
<li><a href="newsletter.htm" title="Newsletter">Newsletter</a></li>
<li><a href="interest.htm" title="generic interest">Generic Interest</a></li>
<li><a href="resources.htm" title="resources">Resources</a></li>
<li><a href="about.htm" title="learn more about me">About</a></li>
<li class="search-form">
<form action="http://simplerpimate.com" method="post">
<label for="search">Search Generic Blog</label>
<input type="search" placeholder="search" title="Search" class="q" name="search" id="search">
<input type="submit" class="button" value="Go" name="submit">
</form>
</li>
</ul>
</nav>
<header role="banner">
<hgroup>
<h1>Generic<span class="generic">Blog</span></h1>
<h2>every post a champion</h2>
</hgroup>
</header>
<section role="main" class="main">
<article class="featured">
<h2>Featured Article</h2>
<h3 class="articleHeader teaser">Lorem Ipsum turns 520</h3>
<img src="_images/lorem_title.jpg" alt="moving from print to the web" class="teaser">
<p>This year marks the 520th year of Lorem Ipsum text. In that sense, Lorem Ipsum may be the most successfull generic content ever. While we may never know the name of the anonomous typesetter that scrambled the galley of type that created Lorem Ipsum,
we are all in debt to his visionary use of generic type. Without Lorem Ipsum, countless wireframes, mockups, and prototypes would lack the generic look and feel that make them so compelling to consumers world-wide.<span class="action"><a href="featured.htm" title="featured article">continue reading</a></span></p>
</article>
<aside role="complementary" class="sidebar">
<section class="intro">
<p>Generic Blog seeks to keep you up to date on the most generic items out there. We want to be your main source for all generic interests and actvities.
<span class="call">Welcome</span></p>
</section>
<ul class="social">
<li><a href="https://twitter.com/jameswillweb" title="Follow me on Twitter" class="twitter">Follow me on Twitter</a></li>
<li><a href="http://www.simpleprimate.com/feed/ " title="RSS Feed" class="rss">Subscribe to my RSS Feed</a></li>
</ul>
<section class="newsletter cf">
<h3>Our Newsletter</h3>
<p>Interested in keeping up to date with what’s going on in the world of generic content? Sign up for our monthly newsletter and never miss out on your favorite generic news.</p>
<p> <a href="#newsletter" class="button right cf">Sign up!</a>
</p>
</section>
<section class="events">
<h3>Upcoming Events</h3>
<p>GeneriCon will be held June 20th of this year. They’ll have an amazing line up of generic speakers and topics, so be sure not to miss out!</p>
</section>
</aside>
</section>
<section class="spotlight">
<article class="latest news">
<h2>Featured News</h2>
<div class="img-wrap"><img src="_images/flower.jpg" alt="responsive images community group"></div>
<h3>Generic drugs keep gaining market share</h3>
<p>Generic drugs, such as Marzipan Imoximile made from the Harvey Cactus flower (shown above) continue to gain in market share.</p>
<p class="call"><a href="http://responsiveimages.org/" title="Responsive images community group" class="button">Find out why!</a></p>
</article>
<article class="latest course">
<h2>Generic item of the week</h2>
<div class="img-wrap"><img src="_images/city_night.jpg" alt="responsive design fundamentals"></div>
<h3>Generic “city at night” shots remain popular</h3>
<p>For many ads and commercials, generic “city at night shots” remain amazingly effective. Come find out which cities offer the most generic shots.</p>
<p class="call"><a href="http://www.lynda.com/Web-Responsive-Design-tutorials/Responsive-Design-Fundamentals/104969-2.html" title="Responsive Design Fundamentals" class="button">Mash!</a></p>
</article>
<article class="latest review">
<h2>Generic facts</h2>
<div class="img-wrap"><img src="_images/beach_yoga.jpg" alt="the truth about HTML5"></div>
<h3>Beach yoga no more effective than generic yoga</h3>
<p>Despite the claims of many self-help gurus, beach yoga is no more effective at finding inner peace than generic yoga. An online study shows more.</p>
<p class="call"><a href="http://www.truthabouthtml5.com/" title="The truth about HTML5" class="button">Mash!</a></p>
</article>
</section>
<footer role="contentinfo">
<p>© 2012 James Williamson | but honestly just use any of the code as you see fit. I'm really putting this here just so I have a footer.</p>
</footer>
</body>
/* --------------------------------------------------
flexbox layout styles
-----------------------------------------------------*/
body {
width: 90%;
margin: 0 auto;
}
/* --------------------------------------------------
top navigation styles
-----------------------------------------------------*/
nav ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav li {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-pack: center;
align-items: center;
}
nav li.search-form {
margin-left: auto;
margin-right: 1em;
}
/* --------------------------------------------------
header styles
-----------------------------------------------------*/
header hgroup {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: baseline;
-ms-flex-pack: baseline;
align-items: baseline;
}
/* --------------------------------------------------
main content styles
-----------------------------------------------------*/
section.main {
margin-bottom: 2em;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
/*.featured, .sidebar{
margin: 4%;
}*/
.featured {
flex: 3;
background: green;
}
.sidebar {
background: red;
margin-left: auto;
flex: 1;
/*margin-right: 2em;*/
}
ul.social {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
justify-content: space-around;
}
/* --------------------------------------------------
spotlight content styles
-----------------------------------------------------*/
.spotlight {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.latest{
flex: 1;
}
/*.latest {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
flex-direction: column;
}*/
/* --------------------------------------------------
footer styles
-----------------------------------------------------*/
footer {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 4em;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/* --------------------------------------------------
Smaller screen styles
-----------------------------------------------------*/
@media only screen and (max-width: 720px) {
/*set direction to single column, set ordinal values*/
body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
nav {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
header {
-webkit-order: 0;
-ms-flex-order: 0;
order:0;
}
.main {
-webkit-order: 2;
-ms-flex-order: 2;
order:2;
}
.spotlight {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
footer {
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
}
/* --------------------------------------------------
top navigation styles
-----------------------------------------------------*/
nav ul {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
nav li.search-form {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
margin: 0 0 2em;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
/* --------------------------------------------------
header styles
-----------------------------------------------------*/
header hgroup {
-webkit-align-items: center;
-ms-flex-pack: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
/* --------------------------------------------------
main content styles
-----------------------------------------------------*/
section.main {
display: block;
margin-bottom: 2em;
}
.sidebar {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 0;
}
.intro {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
margin-top: 2em;
}
.social {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
margin-top: 1em;
}
.newsletter {
-webkit-order: 0;
-ms-flex-order: 0;
flex-order: 0;
margin-bottom: 1em;
}
.events {
-webkit-order: 1;
-ms-flex-order: 1;
flex-order: 1;
}
/* --------------------------------------------------
spotlight content styles
-----------------------------------------------------*/
.spotlight {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.news {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.course {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.review {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
}
最佳答案
I have a flex container that's aligning the child elements along a row in the main-axis. I gave it a
space-between
for itsjustify-content
in order to maintain some space between both divs.I also gave the left div a
flex-grow
by3
, and the right div stayed constant at1
.
如您所知,justify-content
属性用于沿主轴对齐 flex 元素。
flex-grow
属性用于消耗主轴上的空闲空间。
你看到问题了吗?
如果您使用 flex-grow
,所有可用空间都会被占用,并且 justify-content
无法工作,因为没有剩余空间来对齐元素。
My goal is to show a featured-blog post on the left (hence the
flex-grow
by3
) and the sidebar on the right (hence theflex-grow
by1
). I also want there to be space between both divs.
所以不要使用flex-grow
。使用 flex-basis
专门调整元素的大小。然后,如果您留下任何可用空间,您也可以使用 justify-content
。
关于css - 如何在 flex 容器中间隔 flex 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41966050/
我试图根据表格看起来像这样的状态代码来查找表格中的空白。 状态表: StateID (PK) | Code -------------------- 1 | AK 2
我有一个配对字符串列表。我想找到两个字母之间的长度/间隔。到目前为止,我可以使用找到有序字母的间隔 alpha =["AM", "KQ", "ZN", "XM", "UK"] leng
我有一个配对字符串列表。我想找到两个字母之间的长度/间隔。到目前为止,我可以使用找到有序字母的间隔 alpha =["AM", "KQ", "ZN", "XM", "UK"] leng
我正在努力弄清楚如何将时间选择器的下拉间隔设置为 15 分钟间隔。默认为 30 分钟 atm。让它工作的正确调用/符号是什么?我已经尝试了很多将它们放入 '' 的变体,但没有任何进展。谢谢! $
假设我有 table teach_subject(teacher_id, subject_id, min_grade_of_school, max_grade_of_school, color_in_
我有下面的图像,我试图以 3 秒的间隔一张一张地显示它们,但我无法让它工作。它继续停留在 0 并且不显示图像,帮助会很好: JavaScript: window.animate = functio
我认为这个问题类似于加权间隔调度问题,但略有不同。 假设您有一个具有开始时间和结束时间的类次 s,该类次从 s.start 开始有 n 个空位到s.end。时隙是从 s.start 到 s.end 的
我试图将一个 GeometryReader 作为按钮推到屏幕底部,但 Spacer 在这里不起作用...... 这个想法是让应用程序响应所有屏幕尺寸。 VStack { GeometryRea
我问了一个相关问题 here但意识到我在计算这个复杂的度量时花费了太多时间(目标是与随机化测试一起使用,所以速度是一个问题)。所以我决定放弃权重,只使用两个度量之间的最小距离。所以这里我有 2 个向量
我最近成立 healthcheck s 在我的 docker-compose配置。 它做得很好,我喜欢它。下面是一个典型的例子: services: app: healthcheck:
我正在 Cocoa 中使用如下设置的 NSTimer 运行 mainLoop: mainLoopTimer = [NSTimer scheduledTimerWithTimeInter
目前正在开发家庭自动化应用程序,其中有事件 API 可以在事件被触发时为我提供事件。但我想持续运行 API,以便跟踪在整个应用程序中触发的事件。还有一个主页,我在其中显示曾经发生的事件。它是一个简单的
我有一个查询应该是这样的要求: { "size": 0, "_source": [ "dateCreated" ], "query": { "bool": {
我有一个 UNIX 格式的时间字符串。我需要将该字符串四舍五入到最接近的 30 分钟间隔。 例如:我的时间是上午 9:20,而不是应该四舍五入到上午 9:30。 如果分钟数大于 30,例如上午 9:4
我有网络调用,我想定期调用它。我只想将运算符 Interval 与 flatMap 一起使用,但在间隔线程上。你能解释一下这种情况吗?我知道Interval只使用一个线程,任务是按顺序处理的。 我有
我在我的 iOS 应用程序中使用了 NSTimer,但由于 SetNeedsDisplay,我没有得到我想要的结果。 我做了一些研究并找到了 CADisplayLink,它为我提供了我想要的动画结果。
我需要通过给出值数组来生成 map 上图例的值。Java 库中是否有函数可以从值数组和计数值生成范围或区间?像这样的东西: Integer[] getIntervals(Number[] values
我的函数中有以下代码,我试图从数据库中获取参数MAX_FAILED_ATTEMPT,并且基于此,如果检查失败,我将发送警报。当前代码将尝试从 MAX_FIELD_ATTEMPT 获取值并立即依次进行检
我在这里要做的是像 Windows XP 上的那样放下一个轨迹栏来更改分辨率:( http://puu.sh/7Li5h.png ) 我想设置特定的间隔/增量值,如上图所示。目前,实际栏下方的线条已经
是否可以停止当前作为 setInterval 运行的函数? 这是我的代码: 这是我调用的函数 function pull_light_status (lights_array) { $.get
我是一名优秀的程序员,十分优秀!