[css] 플렉스 박스 : 마지막 행을 그리드에 정렬

다음과 같은 컨테이너가있는 간단한 플렉스 박스 레이아웃이 있습니다.

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

이제 마지막 행의 항목을 다른 항목과 정렬하고 싶습니다. justify-content: space-between;그리드의 너비와 높이를 조정할 수 있으므로 사용해야합니다.

현재는 다음과 같습니다

여기서 오른쪽 하단의 항목이 “중간 열”에 있어야합니다. 그것을 달성하는 가장 간단한 방법은 무엇입니까? 여기 에이 동작을 보여주는 작은 jsfiddle 이 있습니다.

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

스 니펫 확장

답변

::after공간을 자동으로 채우는을 추가하십시오 . HTML을 오염시킬 필요가 없습니다. 여기에 표시된 코드 펜이 있습니다 : http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

답변

한 가지 기술은 높이가 0 인 여러 개의 추가 요소 (행에있을 것으로 예상되는 최대 요소 수)를 삽입하는 것입니다. 공간은 여전히 나뉘어 있지만 불필요한 행은 무너집니다.

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

스 니펫 확장

앞으로는 multiple을 사용하여이를 달성 할 수 있습니다 ::after(n).

답변

다른 포스터에서 언급했듯이 (최소한 현재 사양에 따라) 마지막 행을 flexbox와 왼쪽으로 정렬하는 확실한 방법은 없습니다.

그러나 가치있는 것에 대해 : CSS Grid Layout Module을 사용하면 다음과 같이 놀랍도록 쉽게 만들 수 있습니다.

기본적으로 관련 코드는 다음과 같이 요약됩니다.

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) 컨테이너 요소를 그리드 컨테이너로 만듭니다.

2) 너비가 100px 인 자동 열로 그리드를 설정하십시오. (사용상의주의 자동 채우기 에 나란히 놓이는으로 ( auto-fit0 빈 트랙을 붕괴 1 행 레이아웃에있는 () – -. 남은 공간을 차지하기 위해 확장 할 항목을 일으키는 이것은 정당화 ‘공간 사이 초래 그리드에 하나의 행만있는 경우 레이아웃은 우리의 경우 원하는 것이 아닙니다 ( 이 데모 를 확인하여 차이점을 확인하십시오).

3) 그리드 행과 열에 간격 / 홈통을 설정하십시오. 여기에는 ‘공간 간격’레이아웃이 필요하므로 간격이 필요한만큼 커지므로 실제로 간격이 최소 간격이됩니다.

4) flexbox와 유사합니다.

코드 스 니펫 표시

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;

  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

스 니펫 확장

Codepen Demo (효과를 보려면 크기 조정)

답변

추가 태그가 없으면 ::after열 너비를 지정하여 추가 하면됩니다.

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

다음과 같은 HTML로 :

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>

답변

당신은 할 수 없습니다. Flexbox는 그리드 시스템이 아닙니다. 적어도을 사용하고 있지는 않지만 원하는 것을 수행하기위한 언어 구성이 없습니다 justify-content: space-between. Flexbox로 얻을 수있는 가장 가까운 것은 열 방향을 사용하는 것입니다. 열 방향을 명시 적으로 설정해야합니다.

http://cssdeck.com/labs/pvsn6t4z (참고 : 접두사는 포함되지 않음)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

그러나 더 나은 지원을 제공하고 특정 높이를 설정할 필요가없는 열을 사용하는 것이 더 간단합니다.

http://cssdeck.com/labs/dwq3x6vr (참고 : 접두사는 포함되지 않음)

ul {
  columns: 15em;
}

답변

가능한 솔루션을 사용하는 것입니다 justify-content: flex-start;온 .grid온 용기, 그 아이에 대한 크기 제한, 마진 적절한 열 원하는 수에 따라 – 자식 요소.

3 열 그리드의 경우 기본 CSS는 다음과 같습니다.

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

또 다른 불완전한 솔루션이지만 작동합니다.

http://codepen.io/tuxsudo/pen/VYERQJ

답변

나는 거기에 많은 해답이 여기지만 ..이 작업을 수행하는 가장 간단한 방법은 함께 알고 grid대신의 flex와 grid template columns와 repeat와 auto fills당신이 각 요소에 주어진 것을 픽셀의 수를 설정해야 할 경우, 100px당신의 코드 조각에서입니다.

.exposegrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
     justify-content: space-between;
}
 .exposetab {
     width: 100px;
     height: 66px;
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.4);
     border-radius: 5px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     margin-bottom: 10px;
}

<div class="exposegrid">
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
</div>

스 니펫 확장