[ 예 ] [1]
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
끝 - < 스니핏 >;!
따라서 좀 더 어려운 것은 너희는너희가 요구하고 있다.
내 경험을 cleanest" "; # 39, t '와' / '마지막 하위 첫 아이를 doesn& 방식을 사용하여' 는 '는' 에 대한 수정 없이 '와' 여백 5px '에' 패딩 5px 컨테이너입니다 flex 랩 랩 설정할 수 있다. 10px 생산할 수 있는 '각' 어린이 및 상호 간에 격차가 아이들과 모피쳐.
[데모] (
)<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 참 - >.
.upper
{
margin:30px;
display:flex;
flex-direction:row;
width:300px;
height:80px;
border:1px red solid;
padding:5px; /* this */
}
.upper > div
{
flex:1 1 auto;
border:1px red solid;
text-align:center;
margin:5px; /* and that, will result in a 10px gap */
}
.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
끝 - < 스니핏 >;!
[1]: https://caniuse.com/ # 성과 = 플렉상자 차이
제 근무, 다음은 누구없어요 플렉상자 를 지원하는 솔루션으로 모든 브라우저. 아니, 아니 hacks, 아니 해결책 제외어 여유폭 순결케 Css.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 참 - >.
<div class="flexbox">
<div>col</div>
<div>col</div>
<div>col</div>
<div>col</div>
<div>col</div>
<div>col</div>
</div>
<! - 언어: > css 랭 -; 리플렉상자 { 디스플레이: flex. flex 방향선이: 행. flex 랩: 줄 바꿈. 맞춤 컨텐트: 공간 사이. }
.flexbox > div {
/*
1/3 - 3 columns per row
10px - spacing between columns
*/
box-sizing: border-box;
margin-bottom: 10px;
outline: 1px dotted red;
width: calc(1/3*100% - (1 - 1/3)*10px);
}
끝 - < 스니핏 >;!
투명해집니다 사용할 수 있다.
나는 이 문제를 고려 중인 구축하십시오 대체 모델 중 한 테이블 + 표에서 모델에 대한 flex 격자선 수 있는 오래된 브라우저. 내게 가장 잘 맞게 간격 및 국경 열 것으로 보인다. # 39, 즉 표 셀 don& 여유폭 없다.
예:
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
또한 '최소 너버 합니다. 50px. '는 플렉상자. 고정된 크기의 처리하지 않으면 flex 모델은 못하며창조된 'flex: 원하는 대로, 따라서 특정 하위 요소를 없음 ',', 'flexi" " 고정식입니다 제외되어 있다.
그러나 모두 함께 '열' 는 더 이상 플렉스 (flex 컨투어로 없음, 모델이다. 뭔가 더 슬라이드에서는 flex 모델: http://jsfiddle.net/GLpUp/5/실제로 사용할 수 있도록 할 경우, 일반적으로 don& 여유폭 t # 39 표에서 대체 종전의 브라우저. http://jsfiddle.net/GLpUp/3/
설정 '클리핑할 배경: '을 사용할 때 필요한 패딩 기입란, 배경, 그렇지 않으면 배경 유입될 투명해집니다 접경 지역에 있다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
#box {
display: grid;
width: 100px;
grid-gap: 5px;
/* Space between items */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* Decide the number of columns and size */
}
.item {
background: gray;
width: 100%;
/* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
height: 50px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
끝 - < 스니핏 >;!
그러나 이 방법은 모바일 IE10. 오페라 미니 PC 에 대해서만 지원하고, 이 후 않을 것입니다.
참고 전체 브라우저 호환성 등 IE11 오토 프레피셰르 사용하십시오
이전 오토메이티드 #
이 방법은 조합으로의 , 로 사용할 수 있도록 CSS 형제 또한 조작하는 여러 방법으로 문제를 일으킬 수 있습니다 잘못된 신앙이니라 너회의 조합이 있다.
.item+.item{
margin-left: 5px;
}
아래 코드는 할 트릭. 이 방법에서 필요가 없어 전달자로써 '승리를 거두었다. '-' # 를 0 5px; 기입란 '래퍼.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
#box {
display: flex;
width: 100px;
}
.item {
background: gray;
width: 22px;
height: 50px;
}
.item+.item{
margin-left: 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
끝 - < 스니핏 >;!
'&Amp 사용할 수 있습니다. >. '선택기로 + 에뮬레이션하도록 flex 차이' a ' (for a single line):
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }
/* ----- Flexbox gap: ----- */
#box > * + * {
margin-left: 10px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
끝 - < 스니핏 >;!
, Flex 랩할 지원해야 하는 경우에는 래퍼 요소를 사용할 수 있습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
.flex { display: flex; flex-wrap: wrap; }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }
/* ----- Flex gap 10px: ----- */
.flex > * {
margin: 5px;
}
.flex {
margin: -5px;
}
.flex-wrapper {
width: 400px; /* optional */
overflow: hidden; /* optional */
}
<div class='flex-wrapper'>
<div class='flex'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>
</div>
끝 - < 스니핏 >;!
일반 형제 '~' 또는 '+' 형제 선택기를 사용할 수 있습니다 다음 왼쪽 여백에 설정되었습니다 제외한 첫 번째 항목에 대해 ',' 또는 '.item:not {} {왼쪽 여백에 10px 스이테마 ~ 스이테마 사용하여 (마지막 하위) 마진 오른쪽: '10px;}
너무 영리한 것이 플렉상자 자동으로 재계산합니다 및 똑같이 분산시킵니다 격자선.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
body {
margin: 0;
}
.container {
display: flex;
}
.item {
flex: 1;
background: gray;
height: 50px;
}
.item:not(:last-child) {
margin-right: 10px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
끝 - < 스니핏 >;!
, 줄 수 있도록 스케쳐내 flex 예.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
body {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
}
.item {
flex: 0 0 calc(50% - 10px);
background: gray;
height: 50px;
margin: 0 0 10px 10px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
끝 - < 스니핏 >;!
나는 해결책을 찾을 수 있으며, 일반 형제 선택기를 기반으로 하는 '~' 무한 중첩하기.
이 슬라이드에서는 코드 펜 kingdome. seattle. apc® 예
기본적으로 모든 아이들이 열 컨테이너입니다 내부에 있는 또 다른 어린이 앞에는, 위쪽 여백 가져옵니다. 안에 있는 모든 행을, 다른 모든 아이들이 거짓하였으니 컨테이너인 앞에는 왼쪽 여백에 가져옵니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.box {
display: flex;
flex-grow: 1;
flex-shrink: 1;
}
.box.columns {
flex-direction: row;
}
.box.columns>.box~.box {
margin-left: 5px;
}
.box.rows {
flex-direction: column;
}
.box.rows>.box~.box {
margin-top: 5px;
}
<div class="box columns">
<div class="box" style="background-color: red;"></div>
<div class="box rows">
<div class="box rows">
<div class="box" style="background-color: blue;"></div>
<div class="box" style="background-color: orange;"></div>
<div class="box columns">
<div class="box" style="background-color: yellow;"></div>
<div class="box" style="background-color: pink;"></div>
</div>
</div>
<div class="box" style="background-color: green;"></div>
</div>
</div>
끝 - < 스니핏 >;!
-) 은 사파리 " webkit-flex" 포함되어 있다. 버전.
.outer1 {
background-color: orange;
padding: 10px;
}
.outer0 {
background-color: green;
overflow: hidden;
}
.container
{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
background-color: rgba(0, 0, 255, 0.5);
margin-left: -10px;
margin-top: -10px;
}
.item
{
flex-grow: 1;
-webkit-flex-grow: 1;
background-color: rgba(255, 0, 0, 0.5);
width: 100px;
padding: 10px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
color: white;
}
<div class="outer1">
<div class="outer0">
<div class="container">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>
A 플렉스 (flex 와 함께 컨테이너입니다 -x (네거티브) 마진 (양수) 또는 로 개 항목 모두 주관업체로 패딩 여백) 를 원하는 인텔®visual 결과:. * 전용 서로 간에 차이가 2 배 투명지에 flex 항목에서와 고정식입니다.
앨리어스가 것으로 나타나는 것은 기본, flex 의 이익 또는 패딩 분할할지를 사용 할 수 있습니다.
이 예에서, flex 항목은 축소 무중단으로 보호하기 위해 고정식입니다 차이:
.flex-container {
margin: 0 -5px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.flex-item {
margin: 0 5px; // Alternatively: padding: 0 5px;
flex: 1 0 auto;
}
이 사용한 랩된 및 고정식입니다 너버 열. 여기에서 핵심은 '는' 계산기 ()
$gap: 10px;
dl {
display: flex;
flex-wrap: wrap;
padding: $gap/2;
dt, dd {
margin: $gap/2;}
dt { // full width, acts as header
flex: 0 0 calc(100% - #{$gap});}
dd { // default grid: four columns
flex: 0 0 calc(25% - #{$gap});}
.half { // hall width columns
flex: 0 0 calc(50% - #{$gap});}
}
특히, 고통을 함께 만드는 플렉상자 간격 은 랩할 때 도전이다.
사용해야 할 때 제외어 여유폭 ([볼 수 있는 것처럼 질문] (https://stackoverflow.com/q/20626685/3597276):
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
. 또는 변경하십시오 HTML ([같이 다른 답을] (https://stackoverflow.com/a/48752954/3597276):
<div class='flex-wrapper'>
<div class='flex'>
<div class='box'></div>
<div class='box'></div>
...
</div>
</div>
. 또는 something else.
어떤 경우든 해킹할 수 있도록 필요한 경우 그 때문에, t ',' flex 차이 " 제공하십시오 작동합니까 플렉상자 doesn& # 39 ". 피쳐보다 ([적어도 지금은] (https://github.com/w3c/csswg-drafts/issues/592)).
그러나 문제는 간격, CSS 를 사용하여 보다 간편하게 격자선 레이아웃뿐만.
Spec 은 격자선 사이의 공간을 만들어 격자선 속성을 무시한 채 항목 사이의 공간을 항목과 컨테이너입니다. 이러한 특성은 다음과 같습니다.
격자선 열 것으로 보인다. '-' 격자선 행 간격 '-'
최근 사양명세 업데이트되었음 맞춰야 할 수 있는 [CSS 기입란 맞춤에는 모듈에서는] (https://www.w3.org/TR/css-align-3/ # 갭스) 를 사용하여 모든 기입란 모델용 맞춤에는 속성을이 집합을 제공한다. 이제 그 속성:
열 것으로 보인다. '-' 행 간격 '-'
그러나 일부 [격자선 지원하고 있습니다. 브라우저] (https://stackoverflow.com/a/46060829/3597276) 는 새로운 속성 때문에 i& # 39, ll 데모에서 기존 버전을 사용할 수 있습니다.
또한 필요한 경우 사이의 간격은 항목과 컨테이너인 '여백' 에 컨테이너입니다 작동됩니다 (자세한 내용은 제 3 의 예 데모 참조).
>. [10.1. 간격. ',' 이 '행 간격 열 것으로 보인다.' 및 '차이' >. 속성 ] (https://www.w3.org/TR/css3-grid-layout/ # 간격) >. >. '와' 이 '행 간격 열 것으로 보인다.' 속성 (및 그 '차이' 대표) >. 에서 지정한 때 격자선 컨테이너인 정의하십시오 격자선 사이의 간격 >. 행 및 격자선 열. [CSS 기입란 맞춤에는 3 에 정의된 그들의 구문은 >. & # 167, 8 격차를 사서함의] (https://www.w3.org/TR/css-align-3/ # 갭스). >. >. 이러한 특성은 영향을 받는 것처럼 격자선을 효과가 있다. >. 확보됨 두께: 둘 사이에 격자선을 격자선 추적되도록 공간입니다 >. 그들 사이의 간격 표현할 수 있습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.box {
display: inline-grid;
grid-auto-rows: 50px;
grid-template-columns: repeat(4, 50px);
border: 1px solid black;
}
.one {
grid-column-gap: 5px;
}
.two {
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.three {
grid-gap: 10px;
padding: 10px;
}
.item {
background: lightgray;
}
<div class='box one'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<hr>
<div class='box two'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<hr>
<div class='box three'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
끝 - < 스니핏 >;!
추가 정보:
스니핏 확인란 코드는 아래와 같습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
margin-bottom: 10px;
}
.item {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #999;
}
.item-1-4 {
flex-basis: calc(25% - 10px);
}
.item-1-3 {
flex-basis: calc(33.33333% - 10px);
}
.item-1-2 {
flex-basis: calc(50% - 10px);
}
<div class="container">
<div class="item item-1-4">1</div>
<div class="item item-1-4">2</div>
<div class="item item-1-4">3</div>
<div class="item item-1-4">4</div>
</div>
<div class="container">
<div class="item item-1-3">1</div>
<div class="item item-1-3">2</div>
<div class="item item-1-3">3</div>
</div>
<div class="container">
<div class="item item-1-2">1</div>
<div class="item item-1-2">2</div>
</div>
끝 - < 스니핏 >;!
.flex-inline-row {
display: inline-flex;
flex-direction: row;
}
.flex-inline-row.flex-spacing-4px > :not(:last-child) {
margin-right: 4px;
}
사용법:
<div class="flex-inline-row flex-spacing-4px">
<span>Testing</span>
<span>123</span>
</div>
같은 기법을 사용할 수 있는 점을 감안할 때, 확장된 위에서 인라인 예제에서와 외에 일반 flex 행과 열을 아닌 다른 클래스와 간격에 대한 4px.
왜안돼요 do it like this:
.item + .item {
margin-left: 5px;
}
이 soundmixer. [인접한 형제 선택기를] [1] ',' a '를 제외한 모든 요소를 전달자로써 스이테마 첫 번째 왼쪽 여백에'. 그 결과 이 같은 다양한 요소를 플렉상자 있다. 이 수도 있다 ',' 여백 가기 세로일 포지셔닝됩니까 요소와 함께 수행됨 물론이겠지
[1]: https://www.w3.org/TR/CSS21/selector.html # 인접한 선택기를
내가 가장 많이 사용하는 경우가 대한 + 연산자
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
#box {
display: flex;
width: 100px;
}
.item {
background: gray;
width: 50px;
height: 50px;
}
.item + .item {
margin-left: 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
끝 - < 스니핏 >;!
['차이' CSS 속성을] [1] 의 여러 단으로 구성된 새로운 있습니다, 플렉상자 및 격자선 레이아웃을 사용할 수 있는 일부 브라우저에서는 지금이예요! 자세한 내용은 [https://partner. 1], [2] 을 사용할 수 있습니까? [https://partner. 2] [3]).
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. null - >.
#box {
display: flex;
width: 100px;
background-color: red;
gap: 10px;
}
.item {
background: gray;
width: 50px;
height: 50px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
끝 - < 스니핏 >;!
Firefox 에서 때만, 안타깝게도 이 글을 쓰고 있다.
[1]: # Flex_layout https://developer.mozilla.org/en-us/docs/web/css/gap [2]: https://caniuse.com/ # 성과 = 플렉상자 차이 [3]: https://caniuse.com/ # 성과 = mdn-css_properties_gap_flex_context
.columnify {
display: flex;
> * {
flex: 1;
&:not(:first-child) {
margin-left: 2rem;
}
}
}
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
.columnify {
display: flex;
}
.columnify > * {
flex: 1;
}
.columnify > *:not(:first-child) {
margin-left: 2rem;
}
<div class="columnify">
<div style="display: inline-block; height: 20px; background-color: blue;"></div>
<div style="display: inline-block; height: 20px; background-color: blue"></div>
<div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>
끝 - < 스니핏 >;!
Play with it on [이스피들] [1].