Flexbox: 가로와 세로 중앙

source

Flexbox: 가로와 세로 중앙

nicesource 2023. 4. 24. 23:29

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

당신은 다음과 같은 것을 원하는 것 같습니다.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    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 레벨 레벨)이어야 합니다.divspan높이와 위/아래 패딩이 올바르게 동작하도록 하려면 , 를 참조해 주세요.

,에서는, 온.row를, 너비를, 너비를, 너비를, 너비를, 너비로 auto100%.

의 ★★★★★★★★★★★★★★★★★..flex-container속성은 정상입니다.

「」를 .row포트에서 합니다.html ★★★★★★★★★★★★★★★★★」body을으로 지웁니다.body마진

:.flex-container는 수직 정렬 효과를 보기 위해 높이가 필요합니다.그렇지 않으면 컨테이너는 콘텐츠를 둘러싸는 데 필요한 최소 높이를 계산합니다.이 예에서는 뷰 포트 높이보다 작습니다.

★★★★
flex-flow,flex-direction,flex-wrap이 설계를 구현하기 쉽게 만들 수 있었습니다.에는 '오빠'는.row요소(배경 이미지, 테두리 등) 주위에 스타일링을 추가하려는 경우가 아니면 용기가 필요하지 않습니다.

유용한 리소스는 http://demo.agektmr.com/flexbox/ 입니다.

Flexbox에서 요소를 수직 및 수평으로 중앙에 배치하는 방법

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

아이템용 ( 「」「。flex-direction: column아이템의 경우,는 가로로 정렬된 플렉스 아이템의 경우입니다.flex-direction: row를 참조해 주세요.

두 경우 모두 중심 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 */
}

데모

플렉시블 아이템이 수평으로 쌓이는 경우:

조정하다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;
}

데모

플렉스 아이템의 콘텐츠 중심화

플렉시블 포맷콘텍스트의 범위는 부모-자녀 관계로 제한됩니다.하위 컨테이너를 초과하는 플렉스 컨테이너의 하위 컨테이너는 플렉스 레이아웃에 참여하지 않으며 플렉스 속성을 무시합니다.기본적으로 플렉스 속성은 자식 이상으로 상속할 수 없습니다.

때문에 항상 '적용하다'를 .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 */
}

자세한 내용은 이쪽:플렉스 박스 내에서 텍스트를 수직으로 정렬하려면 어떻게 해야 합니까?

'먹다'를 붙일 도 있어요.margin: auto플렉스 아이템의 콘텐츠 요소로 이동합니다.

p { margin: auto; }

에 auto여백: Flex Items 정렬 방법(박스 #56 참조).

여러 개의 플렉스 항목 중심 맞추기

이 있는 " " " " ( " )align-content교차 축 정렬에 특성이 필요합니다.

사양부터:

라인:8.4. 플렉스 라인:align-content

align-content가로축에 여분의 때 컨테이너의 합니다.는 플렉스 컨테이너의 을 정렬하는 방법과 합니다.justify-content주축 내에 개별 항목을 정렬합니다.이 속성은 단일 라인 플렉스 컨테이너에는 영향을 주지 않습니다.

자세한 내용은 이쪽:플렉스 랩은 자기 조정, 정렬 항목 및 정렬 콘텐츠와 어떻게 작동합니까?

브라우저 지원

Flexbox는 IE < 10을 제외한 모든 주요 브라우저에서 지원됩니다.Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에는 벤더 접두사가 필요합니다.프레픽스를 빠르게 추가하려면 자동 리픽서를 사용합니다.자세한 내용은 이 답변을 참조하십시오.

오래된 브라우저를 위한 센터링 솔루션

CSS 테이블과 Positioning Properties를 사용한 대체 센터링 솔루션에 대해서는 다음 답변을 참조하십시오.https://stackoverflow.com/a/31977476/3597276

더하다

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

컨테이너 요소에 연결할 수 있습니다.문서: 정당성, 내용 및 정렬 항목.

를 이용할 수 있습니다.

display: flex;
align-items: center;
justify-content: center;

부모 컴포넌트 상에서

중요한 브라우저 고유의 속성을 사용하는 것을 잊지 마십시오.

align-param: 중앙; -->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justice-content: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

이 2개의 링크(http://css-tricks.com/almanac/properties/j/justify-content/ 및 http://ptb2.me/flexbox/)를 참조해 주십시오.

행운을 빌어요.

사용방법:

   html, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

다음과 같은 HTML 마크업의 경우:

   <html>
      <body>
        <main>
          <button> abc </button>
          <p> something </p>
        </main>
      </body>
    </html>

   html, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

   <html>
      <body>
        <main>
          <button> abc </button>
          <p> something </p>
        </main>
      </body>
    </html>

- 를 1 - "div" CSS로 설정합니다.display: flex;

- 를 2 - "div" CSS로 설정합니다.flex-direction: column;
이렇게 하면 해당 div line 내의 모든 콘텐츠가 위에서 아래로 올라갑니다.이 방법은 부모 div에 자식만 포함시키고 다른 항목은 포함하지 않는 경우에 가장 적합합니다.

3 - 부모 div의 CSS를 로 설정합니다.justify-content: center;

다음으로 CSS의 예를 제시하겠습니다.

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

diplay: flex;컨테이너와margin:auto;완벽하게 동작하기 때문입니다.

메모: 를 셋업해야 합니다.width그리고.height효과를 볼 수 있습니다.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}

<div id="container">
   <div class="item">CENTER</div>
</div>

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>

링크에 텍스트를 중앙에 배치해야 하는 경우 다음과 같이 처리됩니다.

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:

<div class="flex-container">
  <div class="rows">

    <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>

CSS:

html, body {
  height: 100%;  
}

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

.rows {
  display: flex;
  flex-direction: column;
}

어디에flex-containerdiv는 수직과 수평의 중심을 맞추기 위해 사용됩니다.rows,및 div, »rows"column1.div "column"으로하기 위해 합니다.

해서 더하면 요.flex-direction:column구부러지다

.flex-container {
  flex-direction: column;
}

표시 추가: 플렉스 아이템에 인라인블록

.flex-item {
 display: inline-block;
}

를 추가했으므로 이 요소에는 가 표시되므로 이 요소에는 영향이 없습니다. 또는 를 추가해 보십시오.폭과 높이에 대해 자세히 알아봅니다.

행 클래스에도 추가합니다(행 {}이(가) 스타일로 지정되지 않음).

.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}

열에서의 작업 데모:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content:center;
  flex-direction:column;
}
.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}
.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;
  display: inline-block;
}

<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>

컬럼 작업 데모:

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  display: flex;
  align-items: 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;
  display: inline-block;
}

<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>

이게 도움이 되길 바라.

.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;
}

CSS+ 사용

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

여기 좀 봐

언급URL : https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically

'source' 카테고리의 다른 글

정규식으로 파일 형식 검증 (0)	2023.04.24
지시문 @Input 필요 (0)	2023.04.24
SQL Server에서 날짜/시간 중 일부를 제거하는 최선의 방법 (0)	2023.04.24
스타일과 ControlTemplate의 차이점 (0)	2023.04.24
서브타원 svn: 무시 (0)	2023.04.24

현재글Flexbox: 가로와 세로 중앙

각종 프로그래밍 정보를 다루는 블로그입니다.

Android, Excel, ASP.NET, reactjs, MySQL, Git, Spring-Boot, Python, angularjs, CSS, Java, oracle, Powershell, JavaScript, WordPress, MariaDB, php, JSON, mongoDB, C,

Today :
Yesterday :

nicesource

Flexbox: 가로와 세로 중앙

Flexbox: 가로와 세로 중앙

Flexbox에서 요소를 수직 및 수평으로 중앙에 배치하는 방법

플렉스 아이템의 콘텐츠 중심화

여러 개의 플렉스 항목 중심 맞추기

브라우저 지원

오래된 브라우저를 위한 센터링 솔루션

링크에 텍스트를 중앙에 배치해야 하는 경우 다음과 같이 처리됩니다.

열에서의 작업 데모:

컬럼 작업 데모:

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Flexbox: 가로와 세로 중앙

Flexbox: 가로와 세로 중앙

Flexbox에서 요소를 수직 및 수평으로 중앙에 배치하는 방법

플렉스 아이템의 콘텐츠 중심화

여러 개의 플렉스 항목 중심 맞추기

브라우저 지원

오래된 브라우저를 위한 센터링 솔루션

링크에 텍스트를 중앙에 배치해야 하는 경우 다음과 같이 처리됩니다.

열에서의 작업 데모:

컬럼 작업 데모:

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바