>

모든 메뉴 항목의 너비가 가장 넓은 메뉴 표시 줄을 원합니다 (가장 넓은 너비). 메뉴 항목의 수는 다를 수 있습니다. 공간이 더 있으면 메뉴가 컨테이너 중앙에 있어야합니다.

항목이 한 행에 맞지 않으면 다른 행으로 줄 바꿈 될 수 있지만 여전히 같은 너비를 가져야합니다. 다음과 같은 것 :

|    [   short   ] [loooooooong] [  between  ]    |
|    [  wrapped  ]                                |

CSS로이 작업을 할 수 있습니까?

display : grid로 시도했지만 실패했습니다 :

.container { 
  border: 1px solid black;
  display:inline-block;
}
.menu { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, -webkit-max-content));
  grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
  justify-content: center;
  grid-gap: 10px;
  
  background: #eee;
}
.item { 
  border: 1px solid #aaa;
  background: yellow;
  white-space: nowrap;
}

<div class="container">
  <h2>Two items</h2>
  
  <p>
    These should have equal widths (as wide as the widest one is) and be centered within the container.
  </p>
  
  <div class="menu">
    <div class="item">Short</div>
    <div class="item">Looooooooooong</div>
  </div>
  
  <p>
    They are centered all right, but don't have equal widths.
  </p>
  <h2>Three items</h2>
  
  <p>
    These three should also have same width with each other.
  </p>
  
  <div class="menu">
    <div class="item">First item</div>
    <div class="item">Second item</div>
    <div class="item">Third</div>
  </div>
  <p>
    They are centered all right, but don't have equal widths.
  </p>
  
  <h2>So many items that they won't fit on one line</h2>
  <p>
    These should also have equal widths, but they should wrap to the next row. I don't care whether the second row is centered as long as the items are aligned with the row above.
  </p>
  
  <div class="menu">
    <div class="item">First item</div>
    <div class="item">Second item</div>
    <div class="item">Third item, a longer one</div>
    <div class="item">Fourth item</div>
    <div class="item">Fifth item</div>
    <div class="item">Sixth item</div>
    <div class="item">Seventh item</div>
    <div class="item">Eight item</div>
    <div class="item">Ninth item</div>
    <div class="item">Tenth item</div>
    <div class="item">Item number 11</div>
    <div class="item">Item number 12</div>
    <div class="item">Item number 13</div>
    <div class="item">Item number 14</div>
    <div class="item">Item number 15</div>
    <div class="item">Item number 16</div>
    <div class="item">Item number 17</div>
    <div class="item">Item number 18</div>
    <div class="item">Item number 19</div>
    <div class="item">Item number 20</div>
    <div class="item">Item number 21</div>
    <div class="item">Item number 22</div>
    <div class="item">Item number 23</div>
  </div>
  <p>
    They have equal widths, but the width is the min width given in minmax and the content doesn't fit within the item.
  </p>
</div>

(CodePen과 동일 : https://codepen.io/jarnoan/pen/gxrEpR)

질문 중심 테이블 모양 레이아웃 CSS를 사용하여 너비가 같은 열을 사용합니까? 는 비슷하지만 버튼 수가 고정되어 있고 줄 바꿈이 없습니다.

표시 : 그리드 일 필요는 없습니다.


  • 답변 # 1

    1fr 1fr 1fr 를 해봤 니  (각각 전체의 단일 부분 (이 경우 열)을 나타냄)

    다른 사람들은 flexbox를 추천하지만 css-grid는 이론적으로 flexbox가 할 수있는 모든 것을 할 수 있지만 2 차원 (flexbox와 1w 만 비교)이라는 추가적인 이점이 있습니다. 또한 css-grid는 브라우저 수준에서 통합되므로 어떤 프레임 워크에도 의존하지 않습니다.

  • 답변 # 2

    현재 같은 문제가 있습니다. 내가 생각해 낼 수있는 최선은.

    .menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .item {
        flex: 0 1 200px;
        text-align: center;
    }
    
    

    이 방법은 일반적으로 메뉴 항목이 200 픽셀을 차지하지만 사용 가능한 공간이 충분하지 않으면 축소되고 내용이 필요한 경우 줄 바꿈합니다.

    단점은 아이템이 200px 이상을 필요로한다면 아이템은 커지지 만 다른 아이템은 커지지 않는다는 것입니다. 그리고 모든 포장 항목은 중앙에 위치하며 왼쪽에 정렬되지 않습니다.

관련 자료

  • 이전 sql - SqlAlchemy 쿼리/행 병합
  • 다음 jquery - 스크롤 및 창 크기 조정과 같은 이벤트에 vuejs에서 리스너를 사용하는 방법