«flexbox» 태그된 질문

내가 사용 인 flexbox 항목 사이의 최소 거리를 설정하는 방법 margin: 0 5px에 .item와 margin: 0 -5px컨테이너에 있습니다. 나를 위해 그것은 해킹처럼 보이지만, 이것을하는 더 좋은 방법을 찾을 수 없습니다. 예 #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: …

777 css  flexbox 

"Contact"를 사용하는 것보다 오른쪽에 맞추는 더 유연한 방법이 position: absolute있습니까? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some …

681 html  css  flexbox 

플렉스 컨테이너의 주축과 횡축을 고려하십시오. 출처 : W3C 주축을 따라 플렉스 항목을 정렬하려면 하나의 속성이 있습니다. justify-content 가로축을 따라 플렉스 항목을 정렬하려면 세 가지 속성이 있습니다. align-content align-items align-self 위 이미지에서 주축은 가로이고 가로축은 세로입니다. 이것이 플렉스 컨테이너의 기본 방향입니다. 그러나 이러한 방향은 flex-direction속성 과 쉽게 교환 할 수 있습니다 …

677 css  flexbox  language-lawyer  w3c 

flexbox를 사용하여 컨테이너 내에서 div를 가로 및 세로로 가운데에 배치하는 방법. 아래 예제에서 가로 아래에있는 각 숫자가 서로 아래에 (행으로) 표시됩니다. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: …

671 html  css  flexbox 

Flexbox 내부의 Flex 항목의 수직 공간을 채우려 고합니다. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> …

458 css  flexbox 

두 개의 div가 나란히 있습니다. 높이를 동일하게 유지하고 그 중 하나의 크기가 조정되면 동일하게 유지하고 싶습니다. 나는 이것을 알아낼 수 없다. 아이디어? 혼란스러운 질문을 명확히하기 위해 두 상자가 항상 같은 크기가되도록하고 싶습니다. 따라서 텍스트가 배치되어서 하나가 커지면 다른 하나는 높이와 일치하도록 커야합니다. <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; …

441 html  css  html-table  flexbox 

flexbox를 사용하여 일부 내용을 세로로 정렬 <li>하지만 큰 성공을 거두고 싶지 않습니다. 온라인에서 확인했으며 많은 자습서가 실제로 align-items:center부모의 flex 설정에서 가져 오는 래퍼 div를 사용 하지만이 추가 요소를 잘라낼 수 있는지 궁금합니다. 목록 항목 높이가 동적이므로이 인스턴스에서 flexbox를 사용하기로 선택했습니다 %. * { padding: 0; margin: 0; } html, body …

424 html  css  flexbox 

컨테이너 div 안에 3 개의 div를 정렬하고 싶습니다. [[LEFT] [CENTER] [RIGHT]] 컨테이너 div의 너비는 100 % (설정 너비 없음)이며 컨테이너의 크기를 조정 한 후 가운데 div가 가운데에 유지되어야합니다. 그래서 나는 설정했다 : #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} 그러나 그것은 다음과 같습니다 : [[LEFT] [CENTER] ] [RIGHT] 팁이 있습니까?

392 html  css  flexbox  alignment  css-float 

다음과 같은 컨테이너가있는 간단한 플렉스 박스 레이아웃이 있습니다. .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } 이제 마지막 행의 항목을 다른 항목과 정렬하고 싶습니다. justify-content: space-between;그리드의 너비와 높이를 조정할 수 있으므로 사용해야합니다. 현재는 다음과 같습니다 여기서 오른쪽 하단의 항목이 "중간 열"에 있어야합니다. 그것을 달성하는 가장 간단한 방법은 무엇입니까? …

378 css  flexbox  grid-layout 

나는 div아이들과 함께 있습니다. <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> 다음 레이아웃을 원합니다. ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | ------------------- 얼마나 많은 …

374 html  css  flexbox 

최대 5 개의 항목과 3 개의 작은 항목을 가진 flexbox 탐색을 시도하지만 모든 요소간에 너비를 균등하게 나누지는 않습니다. 깡깡이 내가 모델링 한 튜토리얼은 http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ 입니다 . SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 0 0 6.5rem; display: …

368 html  css  flexbox 

아무도 나 사이의 차이 보여줄 수 align-items와 align-content?

366 css  layout  flexbox  alignment 

탐색 표시 줄 항목을 오른쪽에 어떻게 정렬합니까? 로그인하고 오른쪽에 등록하고 싶습니다. 그러나 내가 시도하는 모든 것이 작동하지 않는 것 같습니다. 이것이 내가 지금까지 시도한 것입니다. <div>주위에 <ul>찬사와 함께 :style="float: right" <div>주위에 <ul>찬사와 함께 :style="text-align: right" <li>태그 에서 그 두 가지를 시도 !important끝에 추가하여 모든 것을 다시 시도하십시오. 변경 nav-item에 nav-right에<li> …

341 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

ID 래퍼 내에서 요소를 세로로 정렬하려고합니다. display:inline-flex;ID 래퍼가 플렉스 컨테이너이므로이 ID에 속성 을 부여했습니다 . 그러나 프레젠테이션에는 차이가 없습니다. 래퍼 ID의 모든 내용이 표시 될 것으로 예상했습니다 inline. 왜 그렇지 않습니까? #wrapper { display: inline-flex; /*no difference to display:flex; */ } <body> <div id="wrapper"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> …

331 css  flexbox 

Bootstrap 4를 사용하여 페이지 중간에 컨테이너를 가운데에 배치하려고합니다. 지금까지 실패했습니다. 도움을 주시면 감사하겠습니다. Codepen.io 에서 빌드 했으므로 게임을하고 아이디어가 무엇인지 알 수 있습니다. 코드 스 니펫 표시 var currentAuthor = ""; var currentQuote = ""; function randomQuote() { $.ajax({ url: "https://api.forismatic.com/api/1.0/?", dataType: "jsonp", data: "method=getQuote&format=jsonp&lang=en&jsonp=?", success: function( response ) { …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4