«flexbox» 태그된 질문

유연한 레이아웃을위한 CSS 모듈은 요소를 정렬하는 데 필요한 다양한 옵션을 제공하면서도 부동 및 테이블이 필요하지 않습니다.

5
Flexbox 및 Internet Explorer 11 (display : flex in <html>?)
나는 "floaty"레이아웃에서 벗어나 향후 프로젝트를 위해 CSS flexbox를 사용할 계획입니다. 현재 버전의 모든 주요 브라우저가 (어떤 방식 으로든) 플렉스 박스를 지원하는 것 같아서 기뻤습니다. 몇 가지 예를보기 위해 "Solved by Flexbox" 로 이동했습니다. 그러나 "고정 바닥 글"예제는 Internet Explorer 11에서 작동하지 않는 것 같습니다. 나는 약간 놀았고 display:flex다음 &lt;html&gt;과 같이 …
10
IE에서 Flexbox가 세로로 가운데에 있지 않음
페이지 중앙에 일부 Lipsum 콘텐츠가있는 간단한 웹 페이지가 있습니다. 이 페이지는 Chrome 및 Firefox에서 제대로 작동합니다. 창 크기를 줄이면 콘텐츠가 창을 채울 수 없을 때까지 창을 채운 다음 스크롤 막대를 추가하고 화면에서 아래쪽으로 콘텐츠를 채 웁니다. 그러나 페이지는 IE11에서 중앙에 있지 않습니다. 본문을 구부리면 페이지가 IE의 중앙에 오도록 할 수 …
5
내 위치 : 플렉스 박스를 사용할 때 고정 요소가 고정되지 않습니다.
나는 이것에 약간 붙어 있었고 이것을 공유 할 것이라고 생각했습니다 position: sticky+ flexbox gotcha : 내 고정 div는 내 뷰를 플렉스 박스 컨테이너로 전환 할 때까지 잘 작동했고 갑자기 div가 플렉스 박스 부모에 래핑되었을 때 고정되지 않았습니다. .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky …
8
높이 변경시 이미지 종횡비 유지
CSS 플렉스 박스 모델을 사용하여 이미지가 종횡비를 유지하도록 강제 할 수 있습니까? JS Fiddle : http://jsfiddle.net/xLc2Le0k/2/ 컨테이너의 너비를 채우기 위해 이미지가 늘어나거나 줄어 듭니다. 괜찮습니다.하지만 이미지 비율을 유지하기 위해 높이 를 늘리거나 줄일 수도 있습니까? HTML &lt;div class="slider"&gt; &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt; &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt; &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt; &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt; …
114 html  css  flexbox 
2
플렉스 아이템을 오른쪽으로 띄우기
나는 &lt;div class="parent"&gt; &lt;div class="child" style="float:right"&gt; Ignore parent? &lt;/div&gt; &lt;div&gt; another child &lt;/div&gt; &lt;/div&gt; 부모는 .parent { display: flex; } 첫 번째 아이의 경우 항목을 오른쪽으로 간단히 띄우고 싶습니다. 그리고 내 다른 div는 부모가 설정 한 플렉스 규칙을 따릅니다. 이것이 가능합니까? 그렇지 않은 경우 float: right언더 플렉스를 어떻게 수행 합니까?
114 html  css  flexbox 
2
마지막 플렉스 항목을 컨테이너 끝에 배치
이 질문은 flexbox를 포함하여 전체 css3를 지원하는 브라우저에 관한 것입니다. 일부 항목이 들어있는 플렉스 컨테이너가 있습니다. 그것들은 모두 flex-start로 정당화되었지만 마지막 .end 항목은 flex-end로 정당화 되기를 원합니다 . HTML을 수정하지 않고 절대 위치에 의존하지 않고이 작업을 수행 할 수있는 좋은 방법이 있습니까? .container { display: flex; flex-direction: column; outline: 1px …
105 css  flexbox 
3
Flexbox 레이아웃이 100 % 수직 공간을 차지하게하려면 어떻게해야합니까?
Flexbox 레이아웃 행이 브라우저 창에서 나머지 세로 공간을 사용하도록하려면 어떻게해야합니까? 3 행 플렉스 박스 레이아웃이 있습니다. 처음 두 행은 높이가 고정되어 있지만 세 번째 행은 동적이며 브라우저의 전체 높이로 확장하고 싶습니다. 행 3에 열 세트를 생성하는 또 다른 flexbox가 있습니다. 이 열 내에서 요소를 적절하게 조정하려면 브라우저의 전체 높이를 이해해야합니다. …
102 html  css  flexbox 
3
전체 높이 앱에서 Flexbox와 세로 스크롤을 결합하려면 어떻게해야합니까?
flexbox를 사용하여 전체 높이 앱을 사용하고 싶습니다. display: box;이 링크에서 이전 flexbox 레이아웃 모듈 ( 및 기타)을 사용하여 원하는 것을 찾았습니다 .CSS3 Flexbox 전체 높이 앱 및 오버플로 이는 이전 버전의 flexbox CSS 속성 만 지원하는 브라우저에 적합한 솔루션입니다. 새로운 flexbox 속성을 사용하려면 해킹으로 나열된 동일한 링크에서 두 번째 솔루션을 …
101 html  css  flexbox 
2
CSS 그리드 레이아웃의 동일한 높이 행
각 행은 요소를 맞추는 데 필요한 최소 높이 일 수 있기 때문에 Flexbox를 사용하여 달성하는 것은 불가능하다고 생각하지만 최신 CSS 그리드를 사용하여 달성 할 수 있습니까? 명확하게 말하면, 각 행이 아닌 모든 행에서 그리드의 모든 요소에 대해 동일한 높이를 원합니다. 기본적으로 가장 높은 "셀"은 행의 셀뿐만 아니라 모든 셀의 높이를 …
8
CSS FlexBox 레이아웃의 이미지 자동 크기 조정 및 종횡비 유지?
아래와 같이 나타나는 CSS 플렉스 박스 레이아웃을 사용했습니다. 화면이 작아지면 다음과 같이 바뀝니다. 문제는 원본 이미지의 가로 세로 비율을 유지하면서 이미지 크기가 조정되지 않는다는 것입니다. 순수 CSS와 플렉스 박스 레이아웃을 사용하여 화면이 작아지면 이미지 크기를 조정할 수 있습니까? 내 HTML은 다음과 같습니다. &lt;div class="content"&gt; &lt;div class="row"&gt; &lt;div class="cell"&gt; &lt;img src="http://i.imgur.com/OUla6mK.jpg"/&gt; …
99 html  css  flexbox 
6
Bootstrap 4의 열 중앙에 콘텐츠 배치
문제를 해결하는 데 도움이 필요합니다. 콘텐츠를 bootstrap4의 열 중앙에 배치해야합니다. 아래에서 내 코드를 찾으십시오. &lt;div class="container"&gt; &lt;div class="row justify-content-center"&gt; &lt;div class="col-3"&gt; &lt;div class="nauk-info-connections"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
1
플렉스 아이템이 늘어나지 않도록 방지
견본: div { display: flex; height: 200px; background: tan; } span { background: red; } &lt;div&gt; &lt;span&gt;This is some text.&lt;/span&gt; &lt;/div&gt; 코드 조각 실행결과 숨기기스 니펫 확장 두 가지 질문이 있습니다. 기본적으로 왜 발생 span합니까? 플렉스 컨테이너의 다른 플렉스 아이템에 영향을주지 않고 늘어나는 것을 방지하는 올바른 접근 방식은 무엇입니까?
94 html  css  flexbox 
4
'위치 : 절대'가 Flexbox와 충돌합니까?
div다른 요소에 영향을주지 않고 화면 상단에 막대 를 만들고 중앙에 자식 요소 를 만들고 싶습니다 . .parent { display: flex; justify-content: center; position: absolute; } &lt;div class="parent"&gt; &lt;div class="child"&gt;text&lt;/div&gt; &lt;/div&gt; 코드 조각 실행결과 숨기기스 니펫 확장 position: absolute라인을 추가하면 justify-content: center무효가됩니다. 그들은 서로 충돌하고 있으며 해결책은 무엇입니까? 편집하다 고마워요 부모 …
7
React Native 절대 위치 수평 중심
position:absolute사용 중에는 justifyContent또는 을 사용하여 요소를 중앙에 배치 할 수없는 것 같습니다 alignItems. 사용할 해결 방법이 marginLeft있지만 장치의 높이와 너비를 감지하는 차원을 사용하더라도 모든 장치에 대해 동일하게 표시되지는 않습니다. bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: height*0.93, marginLeft: width*0.18, }, bottomNav: { flexDirection: 'row', },
3
버튼 또는 필드 셋 요소에서 작동하지 않는 Flex / Grid 레이아웃
나는- &lt;button&gt;태그 의 내부 요소 를 flexbox의 justify-content: center. 그러나 Safari는 그들을 중심에 두지 않습니다. 다른 태그에 동일한 스타일을 적용 할 수 있으며 의도 한대로 작동합니다 ( &lt;p&gt;-tag 참조 ). 버튼 만 왼쪽 정렬됩니다. Firefox 또는 Chrome을 사용하면 차이를 확인할 수 있습니다. 덮어 써야하는 사용자 에이전트 스타일이 있습니까? 아니면이 문제에 …
91 html  css  safari  flexbox  css-grid 
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.