css - 적용 - html width flex




플렉스 박스:마지막 행을 그리드에 정렬 (16)

컨테이너와 함께 간단한 플렉스 박스 레이아웃이 있습니다.

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

이제 마지막 행의 항목을 다른 항목과 정렬해야합니다. justify-content: space-between; 그리드의 너비와 높이를 조정할 수 있기 때문에 사용해야합니다.

현재와 ​​같이 보입니다.

여기, 오른쪽 하단의 항목이 "중간 열"에 있어야합니다. 가장 간단한 방법은 무엇입니까? 다음은이 동작을 보여주는 작은 jsfiddle 입니다.


"플렉스 스타트"를 사용하고 여백을 수동으로 추가 할 수 있습니다. 수학 해킹이 필요하지만 LESS와 같은 CSS 프리 프로세서를 사용하면 쉽게 할 수 있습니다.

예를 들어이 LESS 믹스를보십시오 :

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

그리드 레이아웃을 쉽게 표시 할 수 있습니다.

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

다음은의 예입니다.

http://codepen.io/anon/pen/YyLqVB?editors=110


flexbox가없는 방법이 있지만 다음 조건을 충족해야합니다. 1) 용기에 패딩이 있습니다. 2) 항목은 동일한 크기이며 줄당 원하는 수를 정확히 알고 있습니다.

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

컨테이너의 오른쪽에있는 작은 패딩은 각 목록 항목의 오른쪽에 여분의 패딩을 허용합니다. 리스트 객체와 같은 부모에있는 다른 아이템이 0 5 %로 패딩 된 것으로 가정하면, 그것들은 그들과 나란히있을 것이다. 또한 원하는만큼 백분율을 조정하거나 픽셀 값을 계산할 수도 있습니다.

물론 세 번째 상자마다 여백을 없애기 위해 nth-child (IE 9+)를 사용하여 컨테이너의 여백없이 동일한 작업을 수행 할 수 있습니다.


가능한 해결책은 justify-content: flex-start; 를 사용 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


가정 :

  • 줄 바꿈이있는 4 열 그리드 레이아웃이 필요합니다.
  • 항목 수는 반드시 4의 배수가 아닙니다.

1, 5 및 9 번째 항목을 제외한 모든 항목에 왼쪽 여백을 설정합니다. 왼쪽 여백이 10 픽셀이면 각 행의 4 개 항목 사이에 30 픽셀의 여백이 있습니다. 항목의 너비는 다음과 같이 계산됩니다.

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

이는 flexbox의 마지막 행과 관련된 문제에 대한 적절한 해결책입니다.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 22px - 2px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>


나는 그것을 위해 SCSS mixin을 만들었다.

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

이것은 codepen 링크입니다. http://codepen.io/diana_aceves/pen/KVGNZg

너비와 백분율로 항목 폭을 설정하기 만하면됩니다.

이게 당신을 도울 수 있기를 바랍니다.


다른 포스터들도 언급했듯이 - 마지막 행을 flexbox로 왼쪽 정렬하는 깨끗한 방법은 없습니다 (적어도 현재 스펙에 따라)

그러나 CSS 그리드 레이아웃 모듈을 사용 하면 놀랍도록 쉽게 생성 할 수 있습니다.

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

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

1) 컨테이너 요소를 격자 컨테이너로 만듭니다.

2) 폭 100px의 자동 열이있는 격자를 설정하십시오. (1 행 레이아웃의 경우) 빈 트랙을 0으로 축소하여 항목을 확장하여 남아있는 공간을 차지하게하는 auto-fit auto-fill ( auto-fit 사용됨)에 유의하십시오. 이렇게하면 ' space-between '그리드가 우리가 원하는 바가 아닌 행이 하나 밖에없는 경우 ( 이 데모 를 통해 차이점을 확인하십시오)).

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 데모 (효과를 보려면 크기 조정)


마지막 항목에서 플렉스 성장 솔루션을 제안한 사람이없는 것 같습니다. Flex- Grow : 1을 사용하여 가능한 한 모든 장소를 차지하도록 마지막 flex 항목을 만드는 것이 아이디어입니다.

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

.grid > *:last-child {
  flex-grow: 1;
}

참고 :이 솔루션은 완벽하지 않습니다. 특히 플렉스 아이템 내부에 중심 요소가있을 경우 거대한 마지막 플렉스 아이템을 중심으로 배치됩니다.


마지막 항목을 격자에 맞추려면 다음 코드를 사용하십시오.

그리드 컨테이너

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

눈금의 항목

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

트릭은 항목의 최대 너비를 .card-grid : after의 최대 너비와 같게 설정하는 것입니다.

Codepen의 라이브 데모


여기에 또 다른 scss mixins가 있습니다.

이 mixin은 Isotope와 같은 js 플러그인을 사용하지 않을 것이라고 가정합니다 (HTML 마크 업 순서를 따르지 않으므로 CSS nth 규칙을 어지럽 힙니다).

또한 모바일 우선 방식으로 반응 형 브레이크 포인트를 작성하는 경우 특히이를 최대한 활용할 수 있습니다. 이상적으로는 더 작은 중단 점에서 flexbox_grid ()를 사용하고 다음 중단 점에서 flexbox_cell ()을 사용합니다. flexbox_cell ()은 이전에 설정 한 여백을 더 큰 중단 점에서 더 이상 사용하지 않도록 재설정합니다.

그런데 컨테이너의 flex 속성을 올바르게 설정하는 한 필요한 경우 항목에 flexbox_cell () 만 사용할 수도 있습니다.

코드는 다음과 같습니다.

// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $gutter_width);
  }
}

// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $gutter_offset: $gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $gutter_width;
      }
    }
  }
}

용법:

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

분명히 컨테이너의 여백 / 여백 / 너비와 셀의 아래 여백 등을 설정하는 것은 사용자에게 달려 있습니다.

희망이 도움이됩니다!


예.! 우리는 일부 미디어 쿼리와 함께 할 수 있습니다 & 최대 열 수는 미리 정의되어 있습니다.

여기에 4 개의 열을 사용하고 있습니다. 내 코드를 확인하십시오 :

.container {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
}

.container .item {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}
<div class="container">

  <div class="item">
    <div class="item-child">1</div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>

</div>

노트
1) 자식 div를 만들 필요가 없습니다. 그것은 당신이 원하는 무엇이든간에 'img'r과 같은 다른 태그 일 수 있습니다.
2) 더 많은 열을 원할 경우 미디어 쿼리와 최대 열 수를 조정하십시오.


이것은 꽤 해키지만, 그것은 나를 위해 작동합니다. 일관된 간격 / 여백을 얻으려고했습니다.

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/


이것은 많은 답변의 조합입니다. 정확히 필요한 것은 무엇입니까? 즉, flex 컨테이너의 마지막 자식을 왼쪽과 같이 정렬하면서 공간 사이의 동작을 유지합니다 (이 경우에는 3 열 형세).

마크 업은 다음과 같습니다.

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

추가 마크 업없이 ::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>

플렉스 스타트 (flex-start)와 최대 너비 (max-width)로 간단히 달성 할 수 있습니다.

https://codepen.io/moladukes/pen/NvzBrQ

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

.item { 
  width: 130px; 
  max-width: 130px; 
  height: 180px; 
  background: red; 
  margin: 20px; 
}

항목과 항목 사이에 간격이있는 격자를 초기 공간없이 시작하려면이 간단한 솔루션이 효과적입니다.

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

초기 5 픽셀 공간을 원하면 음수 여백을 제거하십시오. Simple.

대답은 받아 들여지는 반면, 두 번째 줄에있는 요소들 사이에 공백이 없어집니다.


::after 추가하면 자동 완성됩니다. HTML을 오염시킬 필요가 없습니다. 여기에 그것을 보여주는 코드가 있습니다 : http://codepen.io/DanAndreasson/pen/ZQXLXj

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

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




grid-layout