我需要使用flexbox来集中我的导航,因此我想出了以下内容:
.navbar-brand > img {
width: 100px;
}
.navbar-default {
background-color: #fff;
border-color: #fff;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.navbar-default .navbar-nav > li > a {
color: #464646;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active {
color: #727272;
}
.navbar-default .navbar-nav > li:not(.active) > a:before {
content: '';
position: absolute;
bottom: 0;
left: 30%; …我有一个容器是整个窗口的高度/宽度.在这个容器里面,我想要一个垂直和水平居中的表格.下面,我还想在容器的底部基线上打印一份副本.类似于下面的蹩脚插图.现在我只能让它们都垂直居中,并且找不到一个很好的方法将底部复制引脚本身放到容器的底部.
---------
| |
| |
|<form> |
| |
|<copy> |
---------
.container {
background-color: #eee;
height: 100vh;
width: 100vw;
padding: 1em;
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
form {
}
.bot {
align-self: flex-end;
}<div class="container">
<form>
<input type="text" />
<button type="submit">submit</button>
</form>
<p class="bot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quae quisquam neque cupiditate adipisci magnam facilis, distinctio suscipit possimus hic voluptatibus in illo est id alias unde sapiente ab eius.</p> …我正在设计一个网页的标题.我希望标题是一行,其中包括徽标和一些导航链接.我觉得今天布局这个标题的最好,最现代的方法是使用CSS3的flexbox,所以这就是我想要使用的.
我希望徽标尽可能远离Flex容器,其余的导航项尽可能最右边.这可以通过左右浮动元素轻松实现,但这不是我想要做的.所以...
如何将flexbox容器的子元素与主轴的相对远端对齐？
flexbox子元素有一个属性,允许您在十字轴上执行此操作align-self,但似乎没有在主轴上执行此操作.
我想出来实现这一目标的最好方法是在徽标和导航链接之间插入一个额外的空元素作为间隔符.但是我选择将flexbox用于此标题的部分原因是为了与响应式设计保持一致,并且我不知道如何使间距元素占用所有剩余空间,而不管观察窗口的宽度如何.
这是我目前对标记的立场,简化为仅包括与此情况相关的元素.
HTML
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
CSS
ul {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: …我一直在阅读灵活盒子,以解决我一直遇到的问题.我读过/用作问题研究的主要文章就是这个.
我最近在这个和这个问题中提出了这个问题,并且感谢@ Michael_B的帮助,<h2>只要总是只有三个flex ,就会解决如何将一个元素(在本例中为一个)置于一个flex-box 中心的问题.弹性框中的-items(在此布局中:) <div><h2><div>.
我想扩展这些要点,因为我意识到可能有一个解决方案可以解决,如果有更多或(更实际)少于3个灵活项目.
它涉及使用边距.如果您margin: auto;在弹性项目上使用它,它会将一个项目居中放在主轴上(有关弹性框的工作原理,请参见下图).
img {
width: 100%;
height: 100%;
}<img src="http://i.stack.imgur.com/9Oxw7.png" alt="flex-box demo" />(这是我弄清楚如何获得下拉照片的最佳方式......)
根据我的理解,使用margin: auto是align-self横轴的属性的当前对应物.
因此,可以通过以下方式将Flex项目置于Flex框中:
$(document).on('click', 'button', function(e) {
$this = $(this);
if ($this.attr('id') === 'button1') {
$('h2').parent().attr("class", "");
$('h2').attr("class", "toggle1");
}
if ($this.attr('id') === 'button2') {
$('h2').parent().attr("class", "");
$('h2').attr("class", "toggle1");
}
if ($this.attr('id') === 'button3') {
$('h2').parent().attr("class", "toggle3");
$('h2').attr("class", "");
} …我在里面有一些代码pre和code标签在我想要水平滚动的引导容器中.这通常很好,直到我为我的页面添加一个flexbox body才能完成粘性页脚.此后,code当页面较窄时(例如移动查看),不再水平滚动.
这是我的代码(请注意,code当您缩小窗口时,水平滚动条会消失):
html, body {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
code {
max-height: 200px;
background-color: #eeeeee;
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
}
.flexer {
flex: 1;
}
footer {
background-color: #CCC;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 docs">
<p>Some sample code</p>
<pre><code>Loading mirror speeds from cached hostfilebase: mirrors.arpnetworks.com * centosplus: mirrors.arpnetworks.com* extras:mirrors.arpnetworks.com*rpmforge: mirror.hmc.eduupdates: mirrors.arpnetworks.comExcluding Packages …我在CSS Grid布局中找到了一个粘性页脚的CodePen解决方案,但它对我来说有两个问题:
min-height: 100%和height: 100%我需要一些适用于这种HTML结构的东西:
<body>
<nav>Some navigation buttons</nav>
<main>The content</main>
<footer>Copyrights and stuff</footer>
</body>
我真的不想收拾<nav>和<main>成<div>,我就喜欢这样做纯CSS.
// Not required!
// This is just to demo functionality.
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris …我试图垂直居中两个<p>元素.
我按照phrogz.net上的教程进行了操作,但仍然将元素放在div上方,在div下面,在div中顶部对齐.
我会尝试其他的东西,但这里的大多数问题只是回到那个教程.
此代码段用于网页顶部的横幅广告.
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p> …有没有办法在所有物品的两侧放置一整套空间,包括第一个和最后一个？
我试图找到一种方法在flexbox子项周围有相等的间距.
在这篇文章中,似乎最接近的是justify-content: space-around.它说:
space-around:项目均匀分布在线条周围,空间相等.请注意,视觉上空间不相等,因为所有项目在两侧都有相等的空间.第一个项目将在容器边缘上有一个空间单位,但在下一个项目之间有两个单位的空间,因为下一个项目有自己适用的间距.
我正在尝试vertical-align: middle在另一个div中的div,但由于某种原因它不能正常工作.我究竟做错了什么？
#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
vertical-align: middle;
}<div id = 'wrapper'>
<div id = 'block'> I'm Block </div>
<div>PS:这只是一个例子,所以不,我实际上并不知道div的实际宽度和高度,因为它们是动态的,根据它们的内容,所以请没有margin-top:125px,或padding-top: 125px答案,或类似的答案.
当我尝试将一个hr元素放入带有 的容器中时display: flex，它消失了。（如果我删除display: flex，它会重新出现，所以我相信这就是原因。）
我在一篇博客文章中读到flex 导致hr宽度为零，我通过给它 100% 的宽度（使其重新出现）确认了这一点，但没有给出任何解释。
出于好奇（我只是把hrflex容器放在外面来解决问题），为什么会出现这种情况？使用 flexbox 也会导致其他随机元素消失吗？
我不认为我的代码中的其他东西会导致这种情况，但这里是我的完整代码，以防万一：
* {
/* Makes width and height include padding, border */
box-sizing: border-box;
}
body {
font-family: "Quicksand", sans-serif;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #2d3c49;
text-transform: uppercase;
}
h1 {
font-weight: 200;
/* Browsers typically display h1 as 2em */
font-size: 2.6em;
margin-bottom: 0;
}
/* Adds a bit of …