또 다른 좋은 기사! 이 페이지를 가이드와 참조로 사용하여 전화 앱처럼 보이는 웹 앱 기반 로그인 템플릿을 만들었습니다. 그것은 주로 플렉스에 대한 열 레이아웃의 연습일 뿐입니다. 그것은 내가 플렉스 속성의 훨씬 더 큰 이해를 얻을 도움이 나는 다른 사람이 배울 수 있도록 그것을 찌를 걱정 할 수 있다고 생각했다. 결과는 다음과 같습니다 : https://jsfiddle.net/Serk0413/y6ugdxgx/10/embedded/result/ (완전한 w / “햄버거”탐색) 여기에 바이올린 (죄송합니다, 펜 없음) : https://jsfiddle.net/Serk0413/y6ugdxgx/ 그것은 중첩 된 플렉스 컬럼을 포함한 CSS 플렉스 소품의 전체 혼합을 사용합니다. 행과 중첩 된 전통적인 CSS (수레 없음!) 열 값은 flex 항목을 위에서 아래로 수직으로 스택합니다. 모든 flex 항목은 행에 균등하게 분포합니다. 정렬 내용 : (가능한 값) 플렉스 스타트 : 컨테이너 플렉스 엔드의 시작 부분에 포장 된 라인 : 컨테이너 센터의 끝에 포장 된 라인 : 컨테이너 공간의 중심에 포장 된 라인 : 라인이 고르게 분포; 첫 번째 줄은 컨테이너의 시작 부분에 있으며 마지막 줄은 공간 주위를 둘러입니다: 플렉스 컨테이너의 각 줄 스트레치(기본값) 주위에 동일한 공간으로 균등하게 분포된 선은 플렉스 라인 내에 배치되고 정렬되어 사용됩니다. 컨테이너 내부의 플렉스 항목을 그룹화하고 정렬할 수 있습니다. 플렉스 선은 주 축을 따릅니다.
플렉스 컨테이너는 플렉스 랩 속성에 따라 단일 라인 또는 다중 줄이 될 수 있습니다 : 안녕하세요, 나는 당신의 튜토리얼을 즐겼다. 그러나 컨테이너 내의 플렉스 박스의 크기를 어떻게 다르게 만들 수 있습니까? 나는 플렉스 성장 컨트롤 크기를 이해하지만, 나는 컨테이너 1과 2에 2와 6을 제공하면, 세 번째 컨테이너는 플렉스 컨트롤이 제공하는 것을 무시한다. `주문`이 실제로 어떻게 작동하는지는 명확하지 않습니다. `주문: 3`은 `세 번째 위치에 놓는다`는 의미는 없으며, `주문`이 3 미만인 항목과 `주문`이 3보다 큰 항목 앞에 놓는 것을 의미합니다. 우리는 (플렉스 박스 사양 편집기) 강력하게 당신이 정말로, 정말 다른 스타일 규칙에서 플렉스 설정에서 폭포를 원하지 않는 한 `플렉스`의 긴 손을 사용하지 않는 것이 좋습니다, 그래서 어떻게 든 `플렉스 성장 / 축소 / 기초`의 사용을 낙담 제안 (또는, 바람직하게는, /고급 섹션에서 제외). 약식은 적절한 방법으로 작업을 재설정하므로 계단식 오류가 줄어듭니다. 속기를 사용해 주세요! 어떻게 아이들의 특정 수에 대한 플렉스 방향을 설정합니까, 나는이 설정에서 HTML을 변경할 수 없습니다 주의하시기 바랍니다, 단지 CSS! 이렇게 하면 플렉스박스 레이아웃 모드가 없으면 브라우저는 도입하려는 모든 플렉스박스 속성을 무시할 수 있습니다. 플렉스 컨테이너를 명시적으로 정의하면 플렉스박스를 다른 레이아웃 모델(예: 부동 및 고급 포지셔닝에서 배우려는 모든 것)과 혼합하고 일치시킬 수 있습니다.