«flexbox» 태그된 질문

너비가 모두 같은 일부 항목이있는 flexbox를 사용하고 싶습니다. flexbox가 공간 자체가 아닌 공간을 균등하게 분산시키는 것으로 나타났습니다. 예를 들면 다음과 같습니다. .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> 코드 스 니펫 실행Hide results스 니펫 …

186 css  flexbox 

다음 스 니펫을 고려하십시오. .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy …

176 css  internet-explorer  flexbox  internet-explorer-11 

Flexbox는 이미지를 원래 높이로 늘이는 동작이 있습니다. 즉, 자식 이미지가있는 flexbox 컨테이너가 있고 해당 이미지의 너비를 조정하면 높이가 전혀 조정되지 않고 이미지가 늘어납니다. div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> 코드 조각 실행결과 숨기기스 니펫 확장 …

172 html  css  flexbox 

중첩 된 flexbox 레이아웃을 작업 중이며 다음과 같이 작동합니다. 가장 바깥 쪽 레벨 ( ul#main)은 더 많은 항목이 추가 될 때 오른쪽으로 확장되어야하는 가로 목록입니다. 너무 커지면 가로 스크롤 막대가 있어야합니다. #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* ...and more... */ } 이 목록 ( ul#main …

167 html  css  flexbox 

점이 상자 사이의 공간을 나타내는 다음 레이아웃을 상상해보십시오. [Left box]......[Center box]......[Right box] 오른쪽 상자를 제거해도 가운데 상자가 여전히 가운데에있는 것을 좋아합니다. [Left box]......[Center box]................. 왼쪽 상자를 제거해도 마찬가지입니다. ................[Center box]................. 이제 가운데 상자의 내용이 길어지면 가운데에 남아있는 동안 필요한만큼 사용 가능한 공간을 차지하게됩니다. 어떤 공간이 남아되지 않는 곳 때 왼쪽과 …

162 html  css  flexbox  centering 

휴무 . 이 질문은 의견 기반 입니다. 현재 답변을받지 않습니다. 이 질문을 개선하고 싶습니까? 이 게시물 을 편집 하여 사실과 인용으로 답변 할 수 있도록 질문을 업데이트하십시오 . 휴일 오년 전에 . 이 질문을 개선하십시오 최근 Flexbox에 가장 높은 div에 따라 div를 같은 높이로 만드는 솔루션을 찾을 때 발견했습니다 . …

161 html  css  twitter-bootstrap  flexbox 

<div>와 컨테이너 가 display: flex있습니다. 아이가 <a>있습니다. 아이를 "인라인"으로 보이게하려면 어떻게해야합니까? 구체적으로, 자녀의 너비를 내용에 따라 결정하고 부모의 너비로 확장하지 않으려면 어떻게해야합니까? 내가 시도한 것 : 아이를로 설정 display: inline-flex했지만 여전히 전체 너비를 차지했습니다. 다른 모든 디스플레이 속성도 시도했지만 아무런 효과가 없었습니다. 예: .container { background: red; height: 200px; flex-direction: …

154 html  css  flexbox 

CodePen : http://codepen.io/anon/pen/RPNpaP . 빨간색 상자가 나란히있을 때 너비가 25 em 밖에되지 않기를 원합니다.이 미디어 쿼리 안에 CSS를 설정하여이를 달성하려고합니다. @media all and (min-width: 811px) {...} 에: .flexbox .red { width: 25em; } 그러나 그렇게하면이 일이 발생합니다 : http://i.imgur.com/niFBrwt.png 내가 뭘 잘못하고 있는지 알아?

149 html  css  flexbox 

나는 중간에 A B있고 싶습니다 C. D오른쪽으로 완전히 가려면 어떻게 해야합니까? 전에: 후: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to the right*/ …

147 html  css  flexbox 

왼쪽 오른쪽 flexbox가 있습니다. .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> 코드 스 니펫 실행결과 숨기기스 니펫 확장 문제는 올바른 자녀가 반응 적으로 행동하지 않는다는 것입니다. 구체적으로 래퍼의 높이를 채우고 싶습니다. 이것을 달성하는 방법?

141 css  flexbox 

상당히 낡은 벽돌 레이아웃을 구현해야합니다. 그러나 여러 가지 이유로 JavaScript를 사용하여 원하지 않습니다. 매개 변수 : 모든 요소의 너비가 동일합니다 요소는 서버 측에서 계산할 수없는 높이를 갖습니다 (이미지와 다양한 양의 텍스트) 필요한 경우 고정 된 수의 열로 살 수 있습니다 현대적인 브라우저에서 작동이에 대한 사소한 해결책이 속성.column-count 해당 솔루션의 문제점은 …

134 html  css  flexbox  css-grid 

우리 모두가 아시다시피, flex속성에 대한 속기 flex-grow, flex-shrink그리고 flex-basis속성. 기본값은입니다 0 1 auto. flex-grow: 0; flex-shrink: 1; flex-basis: auto; 하지만 많은 곳 flex: 1에서 사용되고 있습니다. 1 1 auto또는의 속기 1 0 auto입니까? 그게 무슨 뜻인지 이해할 수없고 Google을 검색해도 아무것도 얻지 못합니다.

129 css  flexbox 

일반적인 CSS를 사용하면 두 개의 열 중 하나를 왼쪽과 오른쪽 사이에 약간의 간격을두고 부동 할 수 있습니다. flexbox로 어떻게 할 수 있습니까? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: …

122 html  css  flexbox 

이 라이브 예제 에서 다음 코드를 찾을 수 있습니다. 다음과 같은 반응 네이티브 요소가 있습니다. 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here …

122 css  reactjs  react-native  flexbox 

이 스레드를 찾았 습니다. 이미지의 종횡비를 유지하면서 <div>를 채우기 위해 이미지를 늘리는 방법은 무엇입니까? — 그것이 내가 원하는 것이 전부는 아닙니다. 특정 크기와 그 안에 이미지가있는 div가 있습니다. 이미지가 가로인지 세로인지에 관계없이 항상 div를 이미지로 채우고 싶습니다 . 그리고 이미지가 잘 렸는지 여부는 중요하지 않습니다 (div 자체에 오버플로가 숨겨져 있음). …

120 image  css  positioning  flexbox