선언문을 작성해 놓았습니다 display: flex 셀 수 있는 것보다 더 많은 시간을, 그리고 아직도 가끔 그것이 사실인지 잊어버립니다 justify-content 또는 align-items 이는 연속적으로 수직축을 제어합니다. 그것은 무지가 아닙니다; 행동에 따라 동작이 바뀌는 레이아웃 모델의 정직한 현실입니다 flex-direction. 방향이 일 때 row, justify-content 수평으로 작동합니다. 로 전환 column 그리고 같은 속성은 이제 수직으로 작동합니다. 상자가 원하는 곳에 떨어질 때까지 이러한 값을 쿡쿡 찌르기 위해 브라우저 개발 도구를 결코 열지 않는다고 주장하는 사람은 거짓말을하거나 내 것보다 훨씬 좋은 메모리를 가지고 있습니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 플렉스박스 생성기 는 제가 이 모델을 배울 때 가지고 있었으면 하는 도구이고,스타일시트를 건드리지 않고 레이아웃을 프로토타입화 하고 싶을 때에도 여전히 도달하고 있는 도구입니다. 컨테이너 속성을 설정하고,샘플 상자의 행이 실시간으로 리플로우되며,보이는 것을 생성하는 정확한 CSS 는 복사 준비 상자의 밑에 있는 "어떤 속성이 what"를 하는지 기억하고 "올바르게 보일 때까지 클릭한 다음 답을 읽어보세요."
TL;DR: Flexbox 는 1 차원 레이아웃 모델입니다. 컨테이너는 6 개의 속성을 통해 이를 구동합니다:
flex-direction,flex-wrap,justify-content,align-items,align-content, 그리고gap. 이 생성기는 이들 모두를 노출시키고,라이브 미리보기를 보여주며,깨끗한 CSS 를 내보냅니다. 미리보기는 출력하는 것과 동일한 선언으로 렌더링하기 때문에,보이는 것은 정확히 붙여넣는 것입니다. 가입 없이 브라우저에서 완전히 실행됩니다.
Flexbox generator 는 어떤 문제를 해결합니까?
Flexbox 는 상대적이기 때문에 정확하게 강력합니다. 당신은 의도를 설명하고 (" 그들 사이에 동일한 공간으로 이러한 항목을 확산," "이 두 축에 센터") 브라우저는 픽셀을 계산합니다. 그러나 각 속성의 효과는 다른 속성의 상태에 따라 달라지기 때문에 상대 시스템은 머릿속에 담기 어렵습니다. align-content 아이템이 감겨지기 전까지는 아무것도 하지 않습니다. 방향을 바꿀 때 주축과 교차축이 바뀝니다. space-between 그리고 space-around 나란히 비교하기 전까지는 비슷하게 보이세요.
상대 시스템에 대한 직관을 구축하는 가장 빠른 방법은 그것을 조작하고 지켜 보는 것입니다. 생성기는 편집-저장-새로 고침 루프를 단일 상호 작용으로 축소합니다: 드롭 다운을 변경하고 상자가 움직이는 것을 봅니다. 라이브 미리보기로 10 분 후에 교차 축을 제어하는 속성은 암기하는 사실이 아니라 느끼는 것이됩니다. 그리고 탐색이 끝나면 복사 할 정신적 메모가 남지 않습니다; 작업중인 CSS 는 이미 당신을 위해 작성되었습니다.
컨테이너는 어떤 속성을 제어합니까?
Flexbox 는 컨테이너와 해당 항목 간에 책임을 나눕니다. 컨테이너가 전체 배열을 결정하며,대부분의 레이아웃 결정이 이루어지는 곳이기 때문에 발전기가 초점을 맞추는 곳입니다. 각 컨테이너 속성이 수행하는 작업은 다음과 같습니다.
| 재산 | 그것이 통제하는 것 | 공통 값 |
|---|---|---|
flex-direction |
주축과 그 방향 | row, column, row-reverse, column-reverse |
flex-wrap |
항목이 새 줄로 넘쳐나는지 여부 | nowrap, wrap, wrap-reverse |
justify-content |
주축을 따라 간격을 둡니다 | flex-start, center, space-between, space-evenly |
align-items |
교차 축에 위치 | stretch, center, flex-start, baseline |
align-content |
교차 축에 감겨진 선의 간격 | stretch, center, space-between |
gap |
항목 사이의 공간 | 예를 들어 모든 길이 16px |
이 막대기를 만드는 정신 모델은 사양의 2 축 아이디어입니다. 항목은 주축을 따라 흐릅니다 flex-direction 설정합니다. 교차축은 항상 수직입니다. justify-content 주축에 공간을 분배한다; align-items 교차 축의 위치. 한 번 flex-direction 이다 column는, 주축은 수직, 그래서 justify-content 이제 항목을 위에서 아래로 쌓습니다 align-items 그들을 왼쪽에서 오른쪽으로 위치시킵니다. 속성에 대한 어떤 것도 바뀌지 않았습니다; 축은 그 아래에서 회전했습니다.
flexbox로 div를 어떻게 중앙에 두나요?
가장 많이 검색된 단일 flexbox 질문이며,답은 세 줄입니다. 컨테이너를 로 설정합니다 display: flex, 그럼 justify-content: center 그리고 align-items: center. 이는 자식을 주축과 교차축에 동시에 집중시키며, 기본 행의 경우 수평 및 수직의 사점을 의미합니다.
발전기에서, 당신은 선택합니다 center 정렬 컨트롤과 샘플 상자 모두 미리보기 영역의 중간으로 이동합니다. 출력 상자는 다음을 보여줍니다:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
이 레시피를 암기하는 것보다 클릭하여 구축할 가치가 있는 이유는 요구 사항이 약간이라도 변경되는 순간, 예를 들어 항목을 상단에 고정하고 수평 중앙에 배치하려는 경우 드롭다운 하나를 변경하고 결과를 볼 수 있기 때문입니다. 편집할 두 속성.
정렬 콘텐츠는 언제 중요합니까?
align-content 는 속성 사람들이 설정 한 다음 왜 아무 일도 일어나지 않는지 궁금해합니다. 대답은 사양에 있습니다: 플렉스 항목이 여러 줄 일 때만 레이아웃에 영향을 미칩니다. 와 함께 flex-wrap: nowrap, 모든 항목은 단일 줄에 위치하므로 배포할 줄 세트가 없으며 속성은 비활성입니다.
생성기는 이 규칙을 인코딩하여 여러분이 이 규칙에 의해 잘못 인도될 수 없도록 합니다.wrap 이 off 일 때,the align-content 제어가 비활성화되고 생성된 CSS 에서 속성이 완전히 생략됩니다. 랩핑을 켜면 활성화되며,랩핑된 항목의 행을 함께 밀거나 교차축에서 서로 분산시키는 것을 볼 수 있습니다. 어떤 작업을 수행할 때만 속성을 방출하면 출력이 정직해집니다: 복사된 규칙의 모든 선언은 레이아웃에 눈에 띄는 영향을 미치는 선언입니다.
정당화-내용 가치의 차이점은 무엇입니까?
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 justify-content 키워드는 차이가 공간적이고 산문으로 설명하기 어렵기 때문에 실시간 미리보기가 유지되는 곳입니다. flex-start 주축의 시작 부분에 항목을 포장합니다. center 중간에 포장합니다. space-between 첫 번째 항목과 마지막 항목을 가장자리로 밀고 나머지 공간을 다른 항목 사이에 균등하게 분배하므로 바깥쪽 가장자리에 공간이 없습니다. space-around 각 항목에 양쪽에 동일한 양의 공간을 제공합니다. 즉, 두 항목 사이의 간격이 가장자리의 간격의 두 배임을 의미합니다. space-evenly 가장자리를 포함하여 모든 간격을 동일하게 만듭니다.
그 단락을 읽으면 거의 아무것도 가르쳐주지 않습니다. 화면에 다섯 개의 상자가있는 다섯 개의 값을 클릭하면 몇 초 만에 가르쳐지며 결코 혼란 스럽지 않습니다 space-between 와 함께 space-around 다시 한 번 가장자리 동작을 나란히 보았습니다. 이는 암기가 아닌 조작을 통해 레이아웃을 구축하는 논증이며 시각적 CSS 도구 세트를 가깝게 유지하는 것과 동일한 논증입니다: the 그라디언트 생성기 그리고 the 박스-섀도 생성기 같은 이유로 존재합니다. 그라데이션과 그림자도 블라인드를 쓰는 것보다 눈으로 전화 걸기가 더 쉽기 때문입니다. 그런 종류의 툴킷을 조립하는 더 넓은 경우는 이 부분에 있습니다 웹 개발자 툴킷.
Flexbox 또는 CSS 그리드?
이 질문은 끊임없이 나오고,경쟁이라는 프레임은 실수입니다. Flexbox 는 1 차원입니다: 그것은 하나의 축을 따라 항목을 배치하고,말하면 감싸고,브라우저가 협상하기를 원하는 크기의 것들의 행에서 탁월합니다. 도구 모음,내비게이션 바,버튼 그룹 및 카드 행은 자연스러운 flexbox 작업입니다. CSS 그리드는 2 차원입니다: 행과 열을 함께 제어하며 명시적인 트랙을 원하는 페이지 수준 구조에서 탁월합니다.
실제 프로젝트에서는 지속적으로 중첩됩니다. 그리드는 페이지 영역을 정의하고 플렉스 컨테이너는 해당 영역 중 하나 내부에 항목을 배열합니다. flexbox 를 철저히 학습한다고 해서 그리드가 중복되는 것은 아니며 그 반대의 경우도 마찬가지입니다; 각 작업에 맞는 도구를 유창하게 만들 수 있습니다. 생성기는 1 차원 사례에 대해 유창함에 도달하는 빠른 방법이며 컨테이너 속성이 제 2 의 특성이면 손으로 플렉스 레이아웃을 읽고 쓰는 것은 참조가 필요하지 않습니다.
Flexbox Generator 는 어떻게 사용하나요?
흐름은 레이아웃에 대해 어떻게 생각하는지 반영합니다.
- 선택
flex-direction그리고 항목을 래핑해야 하는지 여부입니다. 이는 축과 오버플로 동작을 설정하며 다른 모든 결정은 두 가지 결정에 따라 달라집니다. - 정렬을 설정합니다. 조정합니다
justify-content주축에 및align-items미리보기가 머리의 배열과 일치할 때까지 교차 축에서. - 간격 조정. Set the
gap슬라이더가 있는 항목 사이와 래핑이 켜져 있는 경우 설정합니다align-content선을 띄우려면. - CSS 를 복사합니다. 생성된 규칙은 a 를 대상으로 합니다
.container수업 및 업데이트 라이브. 한 번의 클릭으로 복사하여 스타일시트에 붙여넣습니다.
미리보기 항목을 추가하거나 제거하여 레이아웃이 다른 콘텐츠에서 어떻게 동작하는지 테스트할 수도 있습니다. A space-between navbar는 세 가지 항목으로 잘 보이고 7개 항목으로 매우 다릅니다. 시청하는 동안 카운트를 변경할 수 있다는 것이 생산에 도달하기 전에 이를 잡는 방법입니다.
간격이 간격의 여백을 대체합니까?
대부분,예, 그리고 그것은 진정한 개선입니다. 전에 gap 플렉스 컨테이너에서 지원되었으며 항목 간격은 각 하위 항목에 여백을 추가한 다음 일반적으로 a를 사용하여 첫 번째 또는 마지막 항목에 추가 여백과 싸우는 것을 의미했습니다 :last-child 부모에 대한 재정의 또는 마이너스 마진. gap 항목 사이의 공간을 직접 설정하고, 래핑된 선 사이에도 적용하고, 외부 가장자리에 아무것도 추가하지 않으므로 전체 종류의 가장자리 여백 버그가 사라집니다.
발전기는 치료합니다 gap 픽셀 슬라이더가 있는 일류 컨트롤로서 간격이 0 일 때 선언을 생략하여 출력이 최소로 유지됩니다. 제작 작업의 경우 gap on flex 컨테이너는 현재 브라우저에서 잘 지원되므로 마진 접근 방식을 다시 적용할 이유가 거의 없습니다. 작업하는 동안 단위 간 간격 값을 변환하는 경우 CSS 단위 변환기 를 처리합니다 px 에 rem 계산기 없이 산술.
생성된 CSS 의 한계는 무엇인가?
생성기는 컨테이너 규칙을 생성합니다. 와 같은 항목별 속성을 설정하지 않습니다 flex-grow, flex-shrink, 또는 flex-basis개별 항목이 공간을 채우기 위해 확장 및 축소되는 방식을 제어하는 것입니다. 이는 특정 콘텐츠에 따라 달라지는 항목 수준 결정이며 대부분의 레이아웃에 대해 컨테이너 속성 플러스입니다 flex: 1 성장해야 하는 품목에 대해서는 필요한 모든 것입니다. 품목별 정밀한 제어가 필요한 경우에도 생성된 컨테이너 규칙은 여전히 구축해야 할 올바른 기반입니다.
출력은 표준,접두사 없는 속성을 사용합니다. flexbox 에 대한 벤더 접두사는 수년 동안 지원되지 않는 브라우저에 필요했기 때문에 현대적인 스타일시트가 이를 수행해서는 안 되며,오늘 추가하면 노이즈가 됩니다. 생성된 CSS 는 작성된 대로 프로덕션 준비가 되어 있으며,이 점이 요점입니다: 완료해야 하는 시작 스케치가 아니라 붙여넣을 수 있는 규칙을 남깁니다. 프런트 엔드 작업을 더 빠르게 만드는 더 넓은 범위의 소규모 유틸리티 세트의 경우 이 요약입니다 개발자 생산성 도구 좋은 동반자이기도 합니다 그라디언트 생성기 가이드 만약 비주얼 CSS가 속도를 높이고 싶은 부분이라면.
어떤 공통 레이아웃을 구축할 수 있나요?
레시피의 소수 대부분의 일상적인 flexbox 작업을 커버 하 고,각각은 발전기에서 몇 번의 클릭입니다. 왼쪽에 로고와 오른쪽에 링크가 있는 탐색 모음은 justify-content: space-between 와 함께 align-items: center 연속적으로. 완벽하게 중심을 둔 영웅,클래식 "centre a box on the page,"입니다 justify-content: center 그리고 align-items: center. 양식 필드의 수직 스택은 다음과 같습니다 flex-direction: column a와 함께 gap 모든 필드의 여백보다 깔끔한 일관된 간격의 경우 좁은 화면에서 새 줄로 감싸는 반응형 카드 행은 다음과 같은 행입니다 flex-wrap: wrap 그리고 a gap, 그럼 flex: 1 카드 자체에서 줄을 채우기 위해 성장합니다.
메모리에서 복사하는 것이 아니라 생성기에 이러한 것들을 구축하는 것의 가치는 바로 엣지 케이스를 볼 수 있다는 것입니다. A space-between 항목이 하나만 있는 Navbar는 해당 항목을 시작 부분까지 고정하며, 이를 이해할 때까지 버그처럼 보일 수 있습니다 space-between 단일 항목으로 배포할 것이 없습니다. 래핑 카드 행은 2 장의 카드에서 6 장에 비해 다르게 동작하며,preview's 조정 가능한 항목 수를 사용하면 배송하기 전에 두 가지를 모두 확인할 수 있습니다. 조작으로 레이아웃을 구축한다는 것은 사용자가 보고한 후가 아니라 도구에 있는 동안 놀라운 케이스가 표면화된다는 것을 의미합니다.
일단 조리법이 손가락에 있으면,당신은 그것을 위해 발전기를 필요로 멈추고 5 개의 선을 직접 쓴다. 건강한 끝 상태이다. 공구는 생산자 만큼 교사이다: 당신이 클릭해서 건설하는 각 배치가 당신이 손으로 그것을 쓰는 다음 번에 조금 더 나은 이해되는 1 개 이다,정확하게 어떻게 좋은 시각적인 공용품이 fiddly 케이스를 위해 경편한 체재하고 있는 동안 기초에 점차적으로 불필요하게 해야 하는지 이다.
자주 묻는 질문
CSS flexbox generator 란 무엇입니까?
CSS flexbox generator 는 flex 컨테이너 속성을 설정하고 결과 CSS 를 복사할 수 있는 시각적 도구입니다. justify-content,align-items,direction, wrap and gap 을 조정하고 라이브 미리보기를 보고 생성된 규칙을 스타일시트에 붙여넣습니다.
flexbox로 div를 어떻게 중앙에 두나요?
컨테이너를 다음과 같이 표시하도록 설정합니다: flex,그런 다음 justify-content: center 및 align-items: center. 이는 항목을 주축과 교차축 모두에 집중시킵니다. 이 도구에서 정렬 컨트롤 모두에 대해 중앙을 선택하고 CSS 를 복사합니다.
정당화 내용과 정렬 항목의 차이점은 무엇입니까?
justify-content 는 행의 경우 수평이고 열의 경우 수직인 주축을 따라 항목을 배포합니다. align-items 는 주축에 수직인 교차 축에서 항목을 배치합니다. 변경하기 flex-direction swaps 각자가 제어하는 축.
align-content는 언제 영향을 미치나요?
align-content 는 항목들이 하나 이상의 선으로 감싸질 때만 레이아웃에 영향을 주는데,이는 교차축에서 그 선들을 띄워주기 때문입니다. flex-wrap 이 nowrap 으로 설정된 상태에서 한 줄이 있으므로 속성은 아무 것도 하지 않으며 이 도구는 출력에서 생략합니다.
flexbox 에서 gap 속성은 어떤 역할을 하나요?
gap 은 각 항목에 여백을 추가하지 않고 flex 항목 사이에 일관된 공간을 설정합니다. 동일한 줄의 항목 사이와 래핑된 줄 사이에 적용되며 여백 기반 간격이 만드는 가장자리-여백 문제를 방지합니다.
Flex 와 inline-flex 의 차이점은 무엇입니까?
display: flex 는 컨테이너를 사용 가능한 전체 너비를 취하는 블록 수준 상자로 만듭니다. display: inline-flex 는 텍스트 흐름에 위치하며 내용만큼만 넓은 인라인 수준 상자로 만들며,둘 다 동일한 flex 규칙으로 자식을 배치합니다.
Flexbox 가 CSS Grid 를 대체합니까?
아니요. Flexbox 는 단일 축을 따라 항목을 배치하기 위한 1 차원 모델로 도구 모음,내비게이션 및 카드 행에 이상적입니다. CSS 그리드는 행과 열을 함께 사용하는 2 차원입니다. 이들은 상호 보완적이며 동일한 레이아웃에서 자주 사용됩니다.
생성된 CSS는 생산에 사용하기에 안전한가요?
예. Flexbox 는 모든 최신 브라우저에서 지원되며 도구는 접두사가 없는 표준 CSS 속성을 내보냅니다. 모든 처리는 브라우저에서 이루어지므로 아무 것도 업로드되지 않으며 일단 로드되면 도구가 오프라인으로 작동합니다.
