세로로 정렬하는 항목에 대한 다양한 스택 질문과 SASS Susy 정렬/작업을위한 자습서가있는 몇 개의 웹 사이트를 살펴 보았습니다. 내 유스 케이스가 독특하고 아마도 그것을 해결할 기술이 없다.SASS Susy Grid에서 수직으로 정렬 된 LI 용 Susy 및 Flexbox
전폭 컨테이너가 있고 내부에 래퍼가 있습니다. 컨테이너의 전체 너비는 사이트 컨테이너 및 플렉스 랩의 실제 내용이 1200px () 일 때 폭이 넓어서이 될 수 있기 때문에 컨테이너는 서서히 스팬을 사용합니다. 코드에서 중복되는 것처럼 보일 수도 있지만 섹션은 화면을 가로 지르는 배경 요소의 경우 전체 너비가되어야하고 나머지 레이아웃의 경우에는 줄 바꿈이 콘텐츠 크기의 컨테이너입니다.
HTML 컨테이너의 요소의 핵심 그게
<section class="sectionid section"><div class="flexwrap">All the Code for the children elements here</div></section>
CSS
.section{ @include span(full); }
.flexwrap{ @include container(1200px); }
. flexwrap 안에 2 열 (왼쪽 및 오른쪽)이 있습니다. 나는 Susy와이있어
HTML (모른다는 페이스트 빈은 허용되지만 내 코드는 여기에 작동하지 않는) 어떤 인 flexbox없이 지금
<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
.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);
}
}
을 (필자는 마크 업 여기 사업부 컨테이너를 착색 한) :
이제 Flexbox를 추가하면서 내가 읽은 것을 기반으로 생각했습니다. display : flex; flexwrap 다음 표시 : flex; 플렉스 방향 : 칼럼; justify-content : 스페이스 사이; to item_bullets는 작동 할 것이지만 그것을 제외하는 방법을 찾으려는 시도를 한 후에도 내 헤더 텍스트의 위치를 조정할 수 있습니다.
그래서 왼쪽의 & 오른쪽 항목을 저장하기 위해 내부 div를 추가했지만 목록 항목을 세로로 공백/정렬하지 않았습니다. 나는 Susy와 Flexbox를 함께 사용하면 몇 가지 합병증이 있다고 생각하지만 전체 프로젝트는 Susy와 함께 이루어 졌으므로 내가 생각했던 것보다 더 영리한 사람이되기를 바랬다.