CSS Layout

카테고리 없음 2021. 10. 6. 01:31

Display flex, flex-direction

display: flex

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
}

#container div { 
    width: 200px;
    height: 200px;
}

default

Main Axis : row (left to right)

Cross Axis: column (top to bottom)

이것을 'flex-direction' property 를 바꿔줌으로 다르게 해줄 수 있다.

(default)

flex-direction: row -> flex-dirextion: column

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
}

#container div { 
    width: 200px;
    height: 200px;
}

또는, 축을 바꾸는 대신 방향 (left -> right) -> (right -> left) 을 바꿀 수 있다.

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row-reverse;
}

#container div { 
    width: 200px;
    height: 200px;
}

justify-content

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#container div { 
    width: 200px;
    height: 200px;
}

move it to the end of the main axis

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#container div { 
    width: 200px;
    height: 200px;
}

flex-wrap

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap-reverse;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    
}

#container div { 
    width: 600px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#container div { 
    width: 600px;
    height: 200px;
}

main axis: left to right

cross axis: top to bottom

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap-reverse;
}

#container div { 
    width: 600px;
    height: 200px;
}

main axis: left to right

corss axis: bottom to top

align-items

distribute items along the cross axis

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#container div { 
    width: 200px;
    height: 200px;
}

height: 200 200 300 200 450

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#container div { 
    width: 200px;
    height: 200px;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

align-items: cross axis

justify-content: main axis

align-content

cross-axis

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    /* align-content: center; */
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    align-content: center;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    align-content: flex-start;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    align-content: space-between;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

align-self

similiar to align-item except we apply it to individual element in flex container

cross-axis

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

#container div { 
    width: 200px;
    height: 200px;
  text-align: center;
  font-size: 4em;
}

div:nth-of-type(2) {
  align-self:center;
}

div:nth-of-type(3) {
  align-self:flex-end;
}

화나서 그만 마치겠습니다 Web 의 화면은 참으로 어렵군요

ABOUT ME

iOS 를 매우매우 좋아하는 개발자의 노트 iOS 를 매우매우 좋아하는 개발자의 노트