[英]SASS Susy and Flexbox for vertically aligned LI in Susy Grid
I've looked at about a dozen various stack questions about vertically aligning items and a few websites with tutorials for aligning / working with SASS Susy. 我已经查看了十几个关于垂直对齐项目的各种堆栈问题以及一些网站,其中包含用于与SASS Susy对齐/协作的教程。 It seems perhaps my use case is unique and I just don't have the skills to work it out. 似乎我的用例是独特的,我只是没有技巧来解决它。
I've got a Full-Width Container and inside that I have a Wrapper. 我有一个全宽容器,里面有一个包装器。 The container uses susy span full because its just full-width of the site container and the flex wrap is width of the actual content 1200px ( hopefully that makes sense ). 容器使用susy span full,因为它只是站点容器的全宽度和flex包装是实际内容的宽度1200px( 希望这是有意义的 )。 It might seem redundant in the code but section needs to be full-width for background elements that span the screen and the wrap is the container for the content size throughout the rest of the layout. 它在代码中似乎是多余的,但是对于跨越屏幕的背景元素,部分需要是全宽度的,并且包裹是整个布局的其余内容的内容大小的容器。
HTML HTML
<section class="sectionid section"><div class="flexwrap">All the Code for the children elements here</div></section>
CSS CSS
.section{ @include span(full); }
.flexwrap{ @include container(1200px); }
Thats the core of the elements of the container. 这是容器元素的核心。 Inside the flexwrap I have 2 columns (left and right). 在flexwrap内部我有2列(左和右)。
HTML (don't know is pastebin is allowed but my code isn't working on here) HTML(不知道是不允许使用pastebin但是我的代码不在这里工作)
<section class="sectionid section">
<h3>text</h3>
<div class="flexwrap">
<div class="item_left">
<ul class="item_bullets">
<li><div class="bullet_left">img</div><div class="bullet_right">item</div></li>
<li><div class="bullet_left">img</div><div class="bullet_right">item</div></li>
<li><div class="bullet_left">img</div><div class="bullet_right">item</div></li>
</ul>
</div>
<div class="item_right">HEADING & TEXT</div>
</div>
</section>
CSS CSS
.item_bullets {
@include span(full);
margin:0;
list-style:none;
li {
@include span(full);
}
.bullet_left {
@include span(1.5 of 12);
}
.bullet_right {
@include span(9.5 of 12 last);
}
}
Now without any flexbox I've got this with Susy (I've colored the div containers here for the markup): 现在没有任何flexbox我和Susy一起得到了这个(我在这里为div标记了div容器):
Now adding flexbox I thought based on what I read adding display:flex; 现在添加flexbox我根据我读到的内容添加了display:flex; to flexwrap and then display:flex; flexwrap然后显示:flex; flex-direction:column; 挠曲方向:柱; justify-content:space-between; 证明内容:空间之间; to item_bullets would work, but all it did was flex position my header text even after trying to find ways to exclude it. to item_bullets可以工作,但它所做的就是在我试图找到排除它的方法之后将我的标题文本弹性定位。
So I added another inner div to just house the left & right items, but it never vertically spaces / aligns the list items. 所以我添加了另一个内部div来容纳左右项,但它从不垂直空格/对齐列表项。 I assume using Susy and Flexbox together there are some complications but the whole project has been done with Susy so I was hoping someone more clever than I had an idea. 我假设一起使用Susy和Flexbox有一些并发症,但整个项目已经完成了Susy所以我希望有人比我有一个想法更聪明。
It's very hard to follow exactly what you are trying to do, so I acn't give a full code solution, but I'd guess that part of your problem comes from the span
mixin outputting a float
property, which will conflict with display:flex
settings. 很难完全遵循你想要做的事情,所以我没有提供完整的代码解决方案,但我猜你的部分问题来自于输出float
属性的span
mix,这将与display:flex
冲突display:flex
设置。 Try using the span
function instead, to set widths without accidentally setting other properties. 请尝试使用span
函数来设置宽度,而不会意外地设置其他属性。
.bullet_left {
width: span(1.5 of 12);
}
It's also worth noting that span(full)
is almost always useless. 值得注意的是, span(full)
几乎总是无用的。 Block elements default to 100% width, so span(full)
becomes redundant bloat. 块元素默认为100%宽度,因此span(full)
变为冗余膨胀。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.