나는 하나의 자식 요소를 허용하는 flexbox div를 가지고있다. 지금까지 나는 수직 스트레치를 포함하여 멋지게 (위, 왼쪽, 오른쪽, 아래 등) 일하는 아이의 정렬을 얻을 수있었습니다. 나는 또한 세로와 동시에 수평 스트레치를 지원할 수 있기를 원한다. ('동시에'가 핵심 인 것 같다.)양쪽 축에서 HTML5 Flexbox 스트레칭이 가능합니까?
'flex'속성을 자식 요소에서 '1 100 %'로 설정하면 수평 확장을 수행 할 수 있었지만 부모 요소에 적용된 모든 패딩을 무시한 것처럼 보입니다. 그 문제에 대한 자식 노드).
flexbox 사양을 보면 flexbox의 주축을 따라 다른 방법을 찾을 수 없습니다. 크로스 - 축 스트레치는 문제가되지 않습니다.
가능합니다.
.centerbox {
/* basic styling */
width: 350px;
height: 95px;
font-size: 14px;
border: 1px solid #555;
background: #CFC;
/* flexbox, por favor */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}<!DOCTYPE html>
<html>
<head>
<style>
.centerbox {
/* basic styling */
width: 350px;
height: 95px;
font-size: 14px;
border: 1px solid #555;
background: #CFC;
/* flexbox, por favor */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
</style>
</head>
<body>
<div class="centerbox">
<textarea>resize me, please</textarea>
</div>
</body>
</html>참고 : 그리고 당신을 방법을 보여줍니다 작은 샘플입니다 악셀 러셀 멀티 브라우저 지원을위한 클래스를 작성하는 훌륭한 일을했다 : 당신을 찾을 수 있지만 http://infrequently.org/2009/08/css-3-progress/
당신의 해결책으로, 나는 다음 발췌 문장이 일반적인 해결책을 찾은 모든 개발자 (나 자신과 같은)에게 유용 할 것이라고 생각한다. http://jsfiddle.net/EL2KL/1/ 솔루션으로 바이올린을 게시하면 기쁩니다.
p.s. 지리 덕분에 (플렉스 마스터)
찾았습니다. 내가 찾고 있던 속성은 최신 버전의 Chromium (v20)에서는 작동하지만 'Chrome 1 0px'는 현재 Chrome 버전 (v18)이 아닙니다. Chromium v20 + 및 Dartium v20 +에서 테스트되었습니다. –