html - 사용법 - justify-content 속성




Flexbox:수평 및 수직 중심 (6)

Flexbox에서 요소를 세로 및 가로로 가운데 맞춤하는 방법

다음은 두 가지 일반적인 센터링 솔루션입니다.

하나는 수직으로 정렬 된 플렉스 아이템 ( flex-direction: column )이고 다른 하나는 수평 정렬 플렉스 아이템 ( flex-direction: row )입니다.

두 경우 모두 가운데에있는 div의 높이는 가변적이거나 정의되지 않았거나 알 수없는 값이 될 수 있습니다. 중심 div의 높이는 중요하지 않습니다.

다음 두 가지 모두에 대한 HTML이 있습니다.

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS (장식 스타일 제외)

플렉스 아이템이 수직으로 쌓여있을 때 :

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

DEMO

플렉스 아이템이 수평으로 쌓여있을 때 :

위의 코드에서 flex-direction 규칙을 조정하십시오.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

DEMO

플렉스 아이템의 컨텐츠 중앙 집중화

flex 형식화 컨텍스트 의 범위는 부모 - 자식 관계로 제한됩니다. 아이들을 넘은 플렉스 컨테이너의 자손은 플렉스 레이아웃에 참여하지 않고 플렉스 속성을 무시합니다. 본질적으로, flex 속성은 자식을 넘어 상속받을 수 없습니다.

따라서 flex 속성을 자식에 적용하려면 항상 display: flex 또는 display: inline-flex 를 부모 요소에 적용해야합니다.

플렉스 아이템에 포함 된 텍스트 또는 기타 컨텐츠를 세로 및 / 또는 가로 가운데에 배치하려면 해당 아이템을 중첩 된 플렉스 컨테이너로 만들고 센터링 규칙을 반복하십시오.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

자세한 내용은 여기 : 어떻게 flexbox 안에 텍스트를 세로로 정렬합니까?

또는 flex 항목의 content 요소에 margin: auto 를 적용 할 수 있습니다.

p { margin: auto; }

Flex auto 여백에 대한 자세한 내용은 Flex Items 정렬 방법 (상자 56 참조)을 참조하십시오.

플렉스 아이템의 여러 줄 가운데 맞추기

플렉스 컨테이너에 여러 줄이있는 경우 (줄 바꿈 때문에) align-content 속성이 교차 축 정렬에 필요합니다.

사양에서 :

8.4. 플렉스 선 패킹 : align-content 속성

align-content 속성은 가로 축에 추가 공간이있을 때 플렉스 컨테이너 내에서 플렉스 컨테이너의 선을 정렬합니다. 이는 주체 축의 개별 항목을 정렬하는 방법과 유사합니다. 이 property는 단일 라인의 flex 컨테이너에는 영향을주지 않습니다.

자세한 내용은 여기 : flex-wrap은 align-self, align-items 및 align-content로 어떻게 작동합니까?

브라우저 지원

Flexbox는 IE를 제외한 모든 주요 브라우저에서 지원됩니다. Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에는 공급 업체 프리픽스가 필요합니다. 접두어를 추가하는 빠른 방법은 Autoprefixer 사용 Autoprefixer . 이 대답에 대한 자세한 내용.

이전 브라우저를위한 중심 맞춤 솔루션

CSS 표 및 위치 지정 속성을 사용하는 대안적인 센터링 솔루션의 경우이 답변을 참조하십시오. https://stackoverflow.com/a/31977476/3597276

flexbox를 사용하여 div를 수평 적으로 센터링하고 컨테이너 내부에서 수직으로 센터링하는 방법. 아래의 예에서 각 숫자가 서로 아래에 있고 (가로로), 가로로 가운데에 위치합니다.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo


링크에 텍스트를 가운데에 맞춰야하는 경우 트릭을 수행합니다.

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>


나는 당신이 다음과 같은 것을 원한다고 생각합니다.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

데모보기 : http://jsfiddle.net/audetwebdesign/tFscL/

높이와 위쪽 / 아래쪽 패딩이 제대로 작동하려면 .flex-item 요소가 블록 수준 ( span 대신 div 이어야합니다.

또한 .row 에서 폭을 100% 대신 auto 설정하십시오.

.flex-container 속성이 좋습니다.

.row 를 뷰 포트에 세로로 가운데로 표시하려면 htmlbody 100 % 높이를 지정하고 body 여백도 제로로 지정하십시오.

.flex-container 는 수직 정렬 효과를보기 위해 높이가 필요합니다. 그렇지 않으면 콘테이너는 내용을 둘러싸는 데 필요한 최소 높이를 계산합니다.이 높이는이 예제의보기 포트 높이보다 작습니다.

각주:
flex-flow , flex-direction , flex-wrap 특성은이 설계를보다 쉽게 ​​구현할 수있게합니다. 당신이 요소 (배경 이미지, 테두리 등) 주위에 스타일을 추가하고 싶지 않으면 .row 컨테이너가 필요하지 .row 생각합니다.

유용한 리소스 : http://demo.agektmr.com/flexbox/


더하다

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

당신이 중심에두기를 원하는 것의 컨테이너 요소에. 문서화 : justify-contentalign-items


CSS + 사용하기

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

HERE 좀 봐


margin: auto 은 flexbox로 완벽하게 작동합니다. 그것은 수직 및 수평으로 집중됩니다.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>





flexbox