«flexbox» 태그된 질문

왼쪽 및 오른쪽 열의 너비가 고정되어 있고 가운데 열이 사용 가능한 공간을 채우기 위해 구부러지는 3 개의 열로 flexbox 레이아웃을 설정하려고합니다. 열의 치수를 설정했지만 창이 줄어들면서 열이 계속 줄어 듭니다. 아무도 이것을 달성하는 방법을 알고 있습니까? 추가 작업은 사용자 상호 작용에 따라 오른쪽 열을 숨기는 것입니다.이 경우 왼쪽 열은 여전히 …

315 html  css  flexbox 

4 개의 flexbox 열이 있고 모든 것이 잘 작동하지만 텍스트를 열에 추가하고 큰 글꼴 크기로 설정하면 flex 속성으로 인해 열이 더 넓어집니다. 사용하려고 시도했지만 word-break: break-word도움이되었지만 열의 크기를 매우 작은 너비로 조정하면 텍스트의 문자가 여러 줄로 나뉘어 있지만 (한 줄에 하나의 문자) 열이 한 글자 크기보다 작지 않습니다. . 이 …

312 html  css  flexbox 

당신은 대체 할 수 있습니다 align-items로align-self 플렉스 항목. justify-content플렉스 항목 을 재정의하는 방법을 찾고 있습니다 . 으로 flexbox 컨테이너를 가지고 justify-content:flex-end있지만 첫 번째 항목을 원한다면 justify-content: flex-start어떻게 할 수 있습니까? 이것은이 게시물에 의해 가장 잘 대답되었습니다 : https : //.com/a/33856609/269396

283 css  flexbox 

플렉스 박스를 사용하여 페이지와 함께 크기가 조정되는 8 개의 항목을 표시하고 있습니다. 항목을 두 개의 행으로 나누려면 어떻게합니까? (행당 4 개)? 관련 내용은 다음과 같습니다. (아니면 jsfiddle 선호하는 경우 - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ) .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: …

260 html  css  flexbox 

따라서 flexbox를 사용하여 유용한 모달을 만들려고 할 때 브라우저 문제인 것으로 보였으며 알려진 수정 또는 해결 방법 또는 해결 방법에 대한 아이디어가 있는지 궁금합니다. 내가 해결하려고하는 것은 두 가지 측면이 있습니다. 먼저 모달 창을 세로로 가운데에 놓으면 예상대로 작동합니다. 두 번째는 모달 창을 스크롤하는 것입니다-외부에서 모달 창 전체의 내용이 아닌 …

259 html  css  flexbox  browser-bugs 

На этот вопрос есть ответы на 스택 오버플로 на русском : 인 flexbox 항목 - перенос на новую строку 여러 줄 flexbox에서 줄 바꿈을 만드는 방법이 있습니까? 예를 들어이 CodePen의 각 세 번째 항목 다음에 깰 수 있습니다. .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: …

236 html  css  flexbox 

특정 높이의 세로 메뉴를 갖고 싶습니다. 각 자녀는 부모의 키를 채우고 가운데 정렬 된 텍스트를 가져야합니다. 아이들의 수는 무작위이므로 동적 값으로 작업해야합니다. Div .container는 .item항상 부모의 키를 채워야 하는 임의의 수의 자식 ( )을 포함합니다 . 이를 달성하기 위해 flexbox를 사용했습니다. 텍스트가 중간에 정렬 된 링크를 만들려면 display: table-cell기술을 사용하고 …

235 css  google-chrome  webkit  flexbox 

이것에 관한 질문과 기사가 있었지만 내가 말할 수있는 한 결정적인 것은 없습니다. 내가 찾을 수있는 가장 좋은 요약은 flex-basis를 사용하면 다른 항목을 계산하기 전에 요소의 초기 / 시작 크기를 지정할 수 있습니다. 백분율 또는 절대 값일 수 있습니다. ... 자체적으로 플렉스 기준이 설정된 요소의 동작에 대해서는별로 언급하지 않습니다 . flexbox에 …

224 css  flexbox  width 

위의 레이아웃을 달성하기 위해 사용 하는 코드는 다음과 같습니다 . .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; …

214 css  layout  multiple-columns  flexbox 

ReactNative에서 텍스트를 가로 및 세로로 가운데 맞추는 방법은 무엇입니까? rnplay.org에 예제 응용 프로그램이 있는데 justifyContent = "center" 및 alignItems = "center" 가 작동하지 않습니다. https://rnplay.org/apps/AoxNKQ 텍스트가 가운데에 있어야합니다. 왜 텍스트 (노란색)와 부모 컨테이너 사이에 여백이 있습니까? 암호: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, …

212 reactjs  flexbox  react-native 

https://jsfiddle.net/vhem8scs/ flexbox와 두 개의 항목을 왼쪽으로 정렬하고 하나의 항목을 오른쪽으로 정렬 할 수 있습니까? 링크가 더 명확하게 보여줍니다. 마지막 예는 내가 달성하고자하는 것입니다. flexbox에는 하나의 코드 블록이 있습니다. float을 사용하면 네 개의 코드 블록이 있습니다. 이것이 내가 flexbox를 선호하는 이유 중 하나입니다. HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div> <!-- …

212 css  alignment  flexbox 

flexbox에 2 개의 div가 나란히 있습니다. 오른손은 항상 같은 너비 여야하며, 왼손은 남은 공간을 잡기를 원합니다. 그러나 너비를 구체적으로 설정하지 않으면 그렇지 않습니다. 따라서 현재 96 %로 설정되어 화면을 실제로 스쿼시 할 때까지 좋아 보입니다. 오른쪽 div는 필요한 공간에 약간 굶주립니다. 나는 그것을 그대로 둘 수 있다고 생각하지만 잘못 느낄 …

204 html  css  flexbox 

이미 여러 flexbox 튜토리얼을 읽었지만 여전히이 간단한 작업을 수행 할 수는 없습니다. 빨간색 상자를 100 % 너비로 만들려면 어떻게해야합니까? 암호: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> 스타일: container: { …

203 flexbox  react-native 

나는 스타일을 시도 fieldset와 요소 display: flex와 display: inline-flex. 그러나, 그것은 작동하지 않았다 flex처럼 행동 block하고, inline-flex처럼 행동했습니다 inline-block. 이것은 Firefox와 Chrome 모두에서 발생하지만 이상하게는 IE에서 작동합니다. 버그입니까? HTML5 또는 CSS Flexible Box Layout 사양 fieldset에서 특별한 동작 이 있어야한다는 것을 알 수 없었습니다 . fieldset, div { display: flex; …

200 html  css  flexbox 

3 행 레이아웃에서 : 상단 행은 내용에 따라 크기가 조정되어야합니다 맨 아래 줄의 픽셀 높이는 고정되어 있어야합니다 가운데 줄이 컨테이너를 채우도록 확장되어야합니다. 문제는 기본 컨텐츠가 확장됨에 따라 머리글과 바닥 글 행을 없애는 것입니다. HTML : <section> <header> header: sized to content <br>(but is it really?) </header> <div> main content: fills …

196 css  layout  flexbox