[리액트] flex, className

flex

플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델이다.

플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같다.

<div className = "flex-1 flex justify-center items-center">

1. display
2. flex-direction
3. justify-content
4. align-items
5. flex-wrap
6. flex-flow
7. align-content

또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같다.

1. order
2. align-self
3. flex

각 쓰임새 : http://www.tcpschool.com/css/css3_expand_flexbox

className

className [jsx문법] 은 레이아웃을 위해사용한다고 생각하자.
다시말하면 CSS에 정의된 것을 가져오는것이라고 보면 됨.

• (App.js)

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
    </div>
  )
}

• (App.css)

.black-nav {
  background : red;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
}

자세한 내용 : https://codingapple.com/unit/react2-jsx-classname-html/