gwooden_코린이

HTML + CSS display:flex 본문

프론트엔드/html

HTML + CSS display:flex

gwooden22 2022. 12. 20. 11:25
728x90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/st.css">
</head>
<body>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>
.container {
  border: 2px solid red;
  height: 500px;
  display: flex;
  /* justify-content: center; */
  /* justify-content: flex-end; */
  /* justify-content: flex-start; */
}

/* .container div {
  border: 1px solid black;
  background: skyblue;
  height: 50px;
  width: 100px;
} */

.box1 {
  border: 1px solid black;
  background: skyblue;
  height: 100px;
  width: 100px;
}

.box2 {
  border: 1px solid black;
  background: skyblue;
  width: 100px;
}

.box3 {
  border: 1px solid black;
  background: skyblue;
  height: 250px;
  width: 100px;
}

▶ CSS코드 중복 된는거 간소화 시키기

.container div {
  border: 1px solid black;
  background: skyblue;
  width: 100px;
}

.box1 {
  height: 100px;
}

.box2 {

}

.box3 {
  height: 250px;
}
.container {
  border: 2px solid red;
  height: 500px;
  display: flex;

  /* justify-content: center; */
  /* justify-content: flex-end; */
  /* justify-content: flex-start; */

  /* 균등분활 양쪽 여백 포함 */
  /* justify-content: space-around; */

  /* 균등분활 양쪽 여백 미포함 */
  justify-content: space-between;

  /* align-items: center; */
  /* align-items: flex-start; */
  /* align-items: flex-end; */

  /* 높이값 없는 걸 100%로 해줌 */
  align-items: stretch;
}

/* .container div {
  border: 1px solid black;
  background: skyblue;
  height: 50px;
  width: 100px;
} */

.container div {
  border: 1px solid black;
  background: skyblue;
  width: 100px;
}

.box1 {
  height: 100px;
}

.box2 {

}

.box3 {
  height: 250px;
}
.container {
  border: 2px solid red;
  height: 500px;
  display: flex;


  /* 정방향 가로배치 */
  /* flex-direction: row; */

  /* 역순 가로배치 */
  /* flex-direction: row-reverse; */

  /* 정방향 세로배치 */
  /* flex-direction: column; */

  /* 역방향 세로배치 */
  /* flex-direction: column-reverse; */

}
  •   /* flex-direction: column; */
  •   /* 너비 조절 시 줄바뀜 */
  •   /* flex-wrap: wrap; */
  •    /* 너비 조절 시 역방향 줄바뀜 */
  •    /* flex-wrap: wrap-reverse; */
  /* flex-direction: column; */

  /* 너비 조절 시 줄바뀜 */
  /* flex-wrap: wrap; */

   /* 너비 조절 시 역방향 줄바뀜 */
   /* flex-wrap: wrap-reverse; */
.box1 {
  background-color: brown;
  flex-grow: 1;
}

.box2 {
background-color: pink;
flex-grow: 2;
}

.box3 {
  background-color: blue;
  flex-grow: 1;
}

  • align-self: center;
  • align-self: flex-end;
  • align-self: stretch;
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/st.css">
</head>
<body>
  <div class="container">
    <div class="inner">
      <div class="box2"></div>
    </div>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: skyblue;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: palevioletred;
  width: 70%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  background-color: lightcoral;
  width: 70%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/st.css">
</head>
<body>
  <div class="container">
    <div class="box">
      <div></div>
      <div></div>
    </div>
    <div class="box">
      <div></div>
      <div></div>
    </div>
    <div class="box">
      <div></div>
      <div></div>
    </div>
  </div>
</body>
</html>
.container {
  display: flex;
  width: 100vw;
}

.box {
  border: 1px solid red;
  height: 200px;
  width: 33%;
  display: flex;
  flex: 1;
}

.box div {
  width: 50%;
}

.box div:nth-child(1) {
  background-color: yellow;
}

.box div:nth-child(2) {
  background-color: green;
}

728x90
저작자표시 비영리 변경금지

'프론트엔드 > html' 카테고리의 다른 글

HTML+CSS 당근마켓 홈페이지 만들어보기_클론코딩  (0) 2022.12.20
HTML + CSS 시맨틱 태그(semantic)  (0) 2022.12.20
HTML + CSS 가상클래스 ::before와 after  (0) 2022.12.20
html + CSS 가상 클래스  (0) 2022.12.19
html + CSS 애니메이션  (0) 2022.12.19
'프론트엔드/html' Related Articles more
Comments