소개하다.

어제 나는 플렉스박스로 Codesandbox을 재구성했다. 그것은 '권세 있는 사람' 이라는 카드, 그들의 이름, 역할, 취미, 그리고 그림을 보여 주었다.
나는 두 가지 일을 완성하고 싶다.

은 flexbox 구축 카드 자체를 사용합니다.

은 더 넓은 화면에 한 줄로 응답하는 카드나 좁은 화면에 한 줄로 모든 카드를 표시합니다.

카드.

flexbox의 카드가 더 넓은 화면에 배열되어 있습니다.

더 좁은 화면에 flexbox 열의 카드가 있습니다.

이 글은 내가 어떻게 CSS와 HTML을 사용하여 이 점을 실현했는지 분석하고자 할 뿐만 아니라 카드를 미리 디자인하는 과정도 분석하고자 한다.

첫걸음--디자인

나는 Excalidraw을 사용하여 사이트의 요소를 모의한다.Excalidraw는 화면에서 자신의 생각을 신속하게 볼 수 있고 인코딩을 시작할 때 편리한 참고를 제공할 수 있습니다.
나는 카드를 위해 이 모형을 설계했다.

그리고 모든 카드의 배치.

괜찮아 보여요.지금 가장 어려운 부분은 내 카드와 행동이 내가 원하는 것처럼 보이는 것이다.

Flexbox 리소스

만약 이전에 CSS flex 속성을 사용해 본 적이 없다면, Flexbox Froggy을 사용해 보세요. 이것은 학습 flexbox를 게임으로 만드는 것입니다.나는 네가 이 강좌를 반복해서 읽으면 flexbox를 어떻게 사용하는지 더 잘 알게 될 것이라고 보장한다.
또 하나의 좋은 자원은 CSS 기교의 A Complete Guide to Flexbox이다.

두 번째. - 너의 디자인을 알아.

내가 스크린의 모든 요소를 자신의 작은 스크린으로 상상하기 시작했을 때, 나는 flexbox를 이해하기 시작했다.예를 들어 카드는 그 자체가 포함하는 환경이다.카드의 내부 내용은 카드 외부의 요소에 신경 쓸 필요가 없다.모든 카드의 배치는 그 자신의 환경이다.화면의 다른 요소에는 신경 쓸 필요가 없습니다.
가장 바깥쪽'환경'(HTML에서 <div>으로 표시)부터 안쪽으로 작업하는 것이 도움이 될 것으로 본다.나의 강인한 사이트의 최외층 환경은 HTML의 최외층 <div>에 의해 표시된다.

<div className="App">

CSS

.App {
  text-align: center;
}

text-align: center;호 부동산의 중심은'권세 있는 사람'이다.
다음에 나는 나의 모든 카드를 줄별로 표시하고 싶다.flex 속성을 카드에 적용해서 줄로 표시할 수 있는 다른 환경을 만들어야 합니다.
CSS와 HTML을 어떻게 분해하는지

나는 나의 모든 카드를 포장하고 레이아웃을 지정하는 새로운 CSS 클래스 .wrapper을 만들었다.

.wrapper{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
 }

편집: 어떤 사람이 나에게 row은 flex-direction 속성의 기본값이라고 지적했다.이것은 그것을 .wrapper에 포함시키는 것을 불필요하게 만들었다.다른 사람들이 배울 수 있도록 여기에 저장할 것입니다. 필요하면 잠시 후에 참고할 수 있습니다.
Flexbox에는 매우 좋은 특성이 많은데 그 중 하나가 바로 flex-direction이다.행, 열, 행 반전 및 열 반전을 수행할 수 있습니다.flex-direction: row은 카드를 수평 줄에 놓으세요.
무엇이 flex-wrap: wrap입니까?
예를 들어 설명하기 위해서 나는 이 줄을 주석해 버릴 것이다.

.wrapper{
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: center;
}

아이고.카드가 화면에서 넘쳐흘렀다.

이거 별로 좋지 않아요.wap 속성은 부모div 범위 내에서 새 줄을 만들기 위해 마지막 화면 밖의 요소를 아래로 보냅니다.justify-content: center;은 이해하기 쉽다.이 줄을 주석해 놓은 예를 보고 다시 추가할 때 봅시다.

.wrapper{
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
}

justify-content: center;으로 돌아갑니다.

스왑 - 빠른 응답 CSS

이것은 내가'데스크톱 우선'디자인을 만들고 있다는 것을 깨달았을 때'이동 우선'디자인 실천으로 전환하고 싶었다.
응답성 웹 디자인은 웹 사이트로 하여금 화면 크기에 따라 그것들의 화면 표시 방식을 조정하게 한다.이것은 CSS'매체 조회'를 통해 이루어진 것으로 개발자는 그들이 원하는 사이트의 행위에 따라 이러한 조회를 정의한다.CSS 미디어 쿼리에 익숙하지 않은 경우 w3schools.com의 예제를 참조하십시오.
CSS 미디어 조회는 본문의 범위를 넘어섰다. (내가 그것을 쓰면 여기에 연결할 것이다.)
그러나, 나는 .wrapper 클래스를 어떻게 재구성하는지 이야기해야 한다. 모바일 장치에 나의 카드를 단열로 표시하고, 화면이 충분할 때 신축 방향을 줄로 바꾸기 위해 두 번째 CSS 파일 responsive.css과 미디어 조회를 추가해야 한다.
우선 제 재구성 모빌리티 첫 번째 CSS .wrapper 클래스입니다.

.wrapper {
  display: flex;
  flex-direction: column;
}

지금 나의 모든 카드는 수직 기둥 위에 있다.화면 크기에 상관없이, 내 카드는 현재 항상 수직 열에 있을 것이다.
나는 그것들이 여전히 더 큰 스크린에 줄지어 표시되기를 바란다.CSS 미디어 쿼리가 필요합니다.
(responsive.css을 최고급 구성 요소로 가져오는 것을 잊지 마세요. 저에게 이것이 바로 App.js입니다.)

/* responsive.css */

@media only screen and (min-width: 1100px) {
  .wrapper{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

편집: 위에서 언급한 바와 같이 flex-direction: row;을 가지는 것은 불필요한 것이지만 여기서는 불필요한 것이 아니다.이 매체 조회는 내가 이전에 재구성한 flex-direction: column;을 뛰어넘었다.
내가 알려준 .wrapper 클래스는 화면 장치가 1100px 이상이면 신축 방향을 줄로 바꿉니다.

자백

사실은 내가 먼저 만든 카드야.내가 모든 카드를 줄이나 열에 따라 어떻게 표시하는지 알기 전에내가 데스크톱 디자인에서 모바일 디자인으로 전환하기 전에
이유가 있어.처음에 나는 가상 데이터를 사용했는데 화면에 카드 한 장만 있었다.나는 아직 자신의 꿈을 창조하지 못했다.레이아웃을 정의할 필요가 없습니다.
하지만우선 가장 바깥 환경에서 가장 안쪽까지 flex의 개념을 토론하는 것은 일리가 있다.레이아웃을 만들고 있는 경우 화면에 요소가 표시되는 방식을 보려면 카드를 CSS 자리 표시자로 쉽게 바꿀 수 있습니다.
너는 이렇게 할 수 있다.

.card {
  align-self: center;
  background-color: rgb(20, 20, 20);
  margin: 1rem;
  width: 90%;
  height: 15rem;
}

그런 다음 HTML:

<div className="wrapper">
    <div className="card" />
    <div className="card" /> 
    <div className="card" />
    <div className="card" />
    <div className="card" />
    <div className="card" />
    <div className="card" />
    <div className="card" /> 
</div>

이것은 시뮬레이션을 해서 화면에 있는 여러 장의 카드를 렌더링합니다.

3단계(클래스) - 카드 만들기

내가 그린 이 신검 초도를 봐라:

페이지의 모든 요소가 자신의'환경'으로 간주될 수 있다는 것을 기억해라.모든 카드는 .wrapper 환경에서 생활하지만 카드의 어떤 것도 우리가 새로운 환경을 만들고 어떻게 관찰하고 행동할 것인지를 지정할 때까지 어떻게 표현해야 할지 모른다.
각 .card div마다 자신의'포장기'div가 있는데 이름은 .row이다.

.row {
  display: flex;
  flex-direction: row;
}

여기서 우리는 카드의 내용을 수평 줄에 표시하고 왼쪽에서 오른쪽으로 인접해 있음을 알려 준다.
다음으로 .row류의 모든 원소는 .column이라는 div에 포장된다.

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

현재 .columnflex-direction: column;류의 모든 원소가 수직으로 표시되기 때문이다.
무엇이 flex: 1입니까?
CSS Tricks에 따르면

flex: positive-number
Equivalent to flex: 1 0px. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.

If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

현재 .column 클래스의 모든 내용이 display: flex;에 응답할 것입니다. 우리는 flex 속성을 사용할 수 있습니다.나머지 CSS 부분을 살펴보면 카드 컨텐츠의 레이아웃이 결정됩니다.

.info {
  margin-top: .5rem;
  margin-left: 1rem;
}

h1 {
  align-self: center;
  font-family: 'Bangers', cursive;
  font-weight: lighter;
  font-size: 3rem;
  color: rgb(20, 20, 20);
}

h4 {
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  margin-top: -.5rem;
}

p {
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -.5rem;
}

ul {
  margin-top: -.5rem;
}

li {
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

img {
  align-self: flex-start;
  border-radius: 2rem;
  object-fit: cover;
  height: 8rem;
    width: 8rem;
}

모든 HTML 요소 (h1, h4, li, p,img) 가 flex 속성 text-align 또는 align-self을 사용하고 있음을 알 수 있습니다.그것들은 .column류에 있기 때문에 display: flex속성에 호응한다.
마지막으로 제 완전한 App.js 구성 요소입니다.

import React from "react";
import "./styles.css";
import "./responsive.css"
import PersonData from './data/personData'

export default function App() {
  return (
    <div className="App">
      <h1>Powerful People</h1>
        <div className="wrapper">
          {PersonData.map(person => {
            return (
              <div className="card" key={person.id}>
                <div className="row">
                  <div className="column">    
                      <img src={person.url} alt={person.name} />  
                  </div>
                  <div className="column">
                    <div className="info">
                      <p>Full name</p>
                      <h4>{person.name}</h4>
                      <p>Profession</p>
                      <h4>{person.role}</h4>
                      <p>Hobbies</p>
                      <ul>
                        {person.hobbies.map((hobby, i) => { 
                          return(     
                            <li key={i}>{hobby}</li>
                          )
                        })}
                      </ul>
                    </div>
                  </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

모든 사람에 대한 정보는 .info이라는 추가 클래스로 두 열 사이에 추가 정렬과 간격을 추가할 수 있음을 주의하십시오.

마무리

Flexbox에 대한 상세한 소개를 읽어 주셔서 감사합니다. 저는 당신이 떠날 때 어떻게 flex 속성을 사용하여 CSS 레이아웃과 디자인 기능을 개선하는지에 대해 자신감을 가지길 바랍니다!
여느 때와 마찬가지로 나는 피드백과 건설적인 비판을 좋아한다.나는 내가 아직 많은 것을 배우고 향상시킬 수 있다고 믿는다.만약 당신이 내가 무엇을 할 수 있거나 더 잘 설명할 수 있는 것을 본다면, 평론에서 나에게 알려주세요.
다시 한 번 감사드립니다. 즐거운 시간 되세요!