align-content

번역이 완료되지 않았습니다. Please help translate this article from English

CSS align-content 속성은 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스박스의 교차축, 그리드의 블록 축을 따라 배치하는 방식을 결정합니다.

아래의 대화형 예제는 그리드 레이아웃을 사용해 이 속성의 값을 시연합니다.

이 속성은 한 줄로만 이루어진 플렉스 컨테이너에는 아무 효과도 없습니다. (flex-wrap: nowrap 등)

구문

/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: center;     /* Pack items around the center */
align-content: start;      /* Pack items from the start */
align-content: end;        /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end;   /* Pack flex items from the end */

/* Normal alignment */
align-content: normal;

/* Baseline alignment */ 
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
                                 The first item is flush with the start,
                                 the last is flush with the end */
align-content: space-around;  /* Distribute items evenly
                                 Items have a half-size space
                                 on either end */
align-content: space-evenly;  /* Distribute items evenly
                                 Items have equal space around them */
align-content: stretch;       /* Distribute items evenly
                                 Stretch 'auto'-sized items to fit
                                 the container */

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;

start
플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 시작 모서리에 배치합니다.
end
플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 끝 모서리에 배치합니다.
flex-start
플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 시작점에 따라 정렬 컨테이너 모서리에 배치합니다.
플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 start로 취급합니다.
flex-end
플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 끝점에 따라 정렬 컨테이너 모서리에 배치합니다.
플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 end로 취급합니다.
center
플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 중앙에 배치합니다.
normal
align-content를 지정하지 않았을 때처럼, 플렉스/그리드 항목을 한 덩어리로 뭉쳐서 기본 위치에 배치합니다.
baseline
first baseline

last baseline
the baseline is the line upon which most letters "sit" and below which descenders extend.
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
first baseline의 대체 정렬은 start이며 last baseline의 대체 정렬은 end입니다.
space-between
정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목은 정렬 컨테이너 교차축의 시작점에, 마지막 항목은 정렬 컨테이너 교차축의 종료점에 붙입니다.
space-around
정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목 이전 여백과 마지막 항목 이후 여백은 각 항목간 거리의 절반이 됩니다.
space-evenly
정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리, 첫 항목 이전 여백, 마지막 항목 이후 여백이 모두 같아집니다.
stretch
모든 항목의 교차축 방향 크기의 합이 정렬 컨테이너보다 작은 경우, 모든 auto 크기의 항목이 동일(비례하지 않음)하게 커져서 정렬 컨테이너의 교차축 방향을 가득 채웁니다. 단, 항목에 지정한 max-height/max-width 등의 크기 제한은 준수합니다.
safe
정렬 키워드와 함께 사용합니다. 주어진 키워드로 인해 항목이 정렬 컨테이너 밖으로 오버플로하게 되어 데이터가 유실될 수 있으면 항목 정렬에 start를 대신 사용합니다.
unsafe
정렬 키워드와 함께 사용합니다. 컨테이너와 항목의 상대적 크기 및 오버플로로 인한 데이터 유실에 상관하지 않고 주어진 정렬을 준수합니다.

형식 정의

초기값normal
적용대상multi-line flex containers
상속no
Computed valueas specified
Animation typediscrete

형식 구문

normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>

where
<baseline-position> = [ first | last ]? baseline
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

예제

CSS

#container {
  height:200px;
  width: 240px;
  align-content: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

결과

명세

Specification Status Comment
CSS Box Alignment Module Level 3
The definition of 'align-content' in that specification.
Working Draft Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values.
CSS Flexible Box Layout Module
The definition of 'align-content' in that specification.
Candidate Recommendation Initial definition

브라우저 호환성

플렉스 레이아웃 지원

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 28
Full support 28
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11Opera Full support 12.1Safari Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 28
Full support 28
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support 9
Full support 9
Full support 7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 2.0
Full support 2.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
baselineChrome Full support 57Edge Full support 79Firefox Full support 45IE No support NoOpera Full support 44Safari Full support 9WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 45Opera Android Full support 43Safari iOS Full support 9Samsung Internet Android Full support 7.0
first baseline and last baselineChrome No support NoEdge No support NoFirefox Full support 52IE No support NoOpera No support NoSafari Full support 11WebView Android No support NoChrome Android No support NoFirefox Android Full support 52Opera Android No support NoSafari iOS Full support 11Samsung Internet Android No support No
left and rightChrome No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Edge No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox No support 52 — 60
Notes
No support 52 — 60
Notes
Notes align-content no longer accepts the left and right values
IE No support NoOpera No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari No support NoWebView Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Chrome Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox Android No support 52 — 60
Notes
No support 52 — 60
Notes
Notes align-content no longer accepts the left and right values
Opera Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
safe and unsafeChrome No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Edge No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox Full support 63IE No support NoOpera No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
WebView Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Chrome Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox Android Full support 63Opera Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari iOS No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Samsung Internet Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
space-evenlyChrome Full support 60Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 47Safari Full support 11WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 52Opera Android Full support 44Safari iOS Full support 11Samsung Internet Android Full support 8.0
start and endChrome No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Edge No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox Full support 45IE No support NoOpera No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari No support NoWebView Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Chrome Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Firefox Android Full support 45Opera Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
Safari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes This value is recognized, but has no effect.
stretchChrome Full support 57Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 44Safari Full support 9WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 52Opera Android Full support 43Safari iOS Full support 9Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

그리드 레이아웃 지원

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Grid LayoutChrome Full support 57Edge Full support 16Firefox Full support 52IE No support NoOpera Full support 44Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 52Firefox Android Full support 52Opera Android Full support 43Safari iOS Full support 10.3Samsung Internet Android Full support 6.2

Legend

Full support  
Full support
No support  
No support

같이 보기