Flex 레이아웃을 사용하여 여러 행과 여러 div를 가로 및 세로로 중앙에 배치하는 방법

가로 및 세로는 항상 고전적인 문제였습니다. 최근에 페이지 스타일을 작성할 때 이 문제에 직면했습니다. 이번에는 가로 및 세로 중앙에 배치해야 하는 것이 여러 행과 여러 p 블록입니다. 이번에는 flex 레이아웃을 사용했습니다. 왜냐하면 flex 레이아웃을 사용하면 브라우저가 이를 계산하기 때문입니다. 여기서 상위 요소는 flex 레이아웃 아래에 기본 축과 수직 교차 축이 있어야 합니다. 축은 기본적으로 수평이고 교차 축은 기본적으로 수직입니다. 예, 특정 플렉스 레이아웃에 대해서는 교사 Ruan Yifeng의 튜토리얼(http://www.ruanyifeng)을 참조하십시오. com/blog/2015/07/flex-grammar.htmlcss

CSS 코드는 다음과 같습니다.

<p class="content" > 
   <p class="chart"></p>
   <p class="chart"></p>
   <p class="chart"></p>
   <p class="chart"></p>
   <p class="chart"></p>
   <p class="chart"></p> 
</p>

flex-wrap 속성은 flex 레이아웃의 요소를 래핑해야 하는지 여부를 나타냅니다. 즉, 이 속성은 세 가지 값을 가질 수 있습니다. 이제 랩, 랩 및 랩 리버스. 기본값은 nowwrap(줄 바꿈 없음)이고, Wrap은 하위 요소가 래핑되고 첫 번째 줄이 맨 위에 있음을 의미하며, Wrap-reverse는 하위 요소가 래핑되고 첫 번째 줄이 맨 아래에 있음을 의미합니다.

align-items 속성은 항목이 교차 축에 정렬되는 방식을 정의합니다. 여기서 교차 축의 기본 방향은 세로 방향이며, 이는 교차 축의 중간점에 정렬됩니다. 속성의 값은 다음과 같습니다:

.content {  
  display: flex;  
  flex-wrap: wrap;  
  align-items: center;  
  width: 100%;  
  height: 100%;
  }

이런 방식으로 수직 중앙 정렬의 목적을 달성했지만 수평 중앙 정렬도 필요합니다.

세로 중앙에 배치되어야 하는 하위 요소의 스타일 코드는 다음과 같습니다.

flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

display: inline-block p를 같은 줄에 표시하기 위해 여기의 너비와 높이에 따라 표시할 수 있는 p 블록 수가 결정됩니다. 한 줄.

margin: 0 auto는 하위 요소를 수평으로 중앙에 배치하는 것입니다. auto는 자동을 의미하므로 수평 및 수직 중앙 정렬이 가능합니다.

위 내용은 Flex 레이아웃을 사용하여 여러 행과 여러 div를 가로 및 세로로 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!