기초공사 (html,css,javascript)

flex-예제 본문

academy/html

flex-예제

에스프레소라떼 2024. 3. 10. 23:48

// 임의로 만들어봤다.

 

화면이 줄어듬에 따라 aside 두개는 안줄어들고 가운데만 변하게 하기

--> aside는 flex-basis를 주고, 안줄어 들게하는 flex-shrink=0을 주면된다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="flex-ex.css" />

    <style></style>
  </head>
  <body>
    <h1>Flex<span>-aside는 안줄어들고 가운데만 변하게하기</span></h1>
    <section>
      <aside class="left">
        <p>html</p>
        <p>css</p>
        <p>javascript</p>
      </aside>

      <div class="border">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quos vel
        culpa, adipisci dolores itaque voluptatibus voluptatem repellendus
        quaerat obcaecati illo ullam possimus officia tempora? Illo illum
        delectus sunt perferendis.
      </div>

      <aside class="right">
        <p>AD</p>
      </aside>
    </section>
    <footer>홈페이지</footer>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  margin: 20px;
  display: inline-block;
}
span {
  font-size: 20px;
  color: rgb(125, 125, 128);
}
section {
  display: flex;
  height: 200px;
  background-color: rgb(219, 218, 218);
  border: 1px solid red;
}

.left {
  background-color: aqua;
  /*flex의속성상 화면이 줄어들면 flex-basis도 같이줄어듬. 그래서flex-shrink-0을주면 줄어들지 않음.*/
  flex-basis: 100px;
  flex-shrink: 0;
}
/* 가운데. */
.border {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding: 10px;
  background-color: rgb(11, 141, 192);
}
.right {
  background-color: aquamarine;
  flex-basis: 100px;
  flex-shrink: 0;
}

footer {
  text-align: center;
  padding: 10px;
}
저작자표시

'academy > html' 카테고리의 다른 글

엘리 사이트-line-gradient 방법  (0) 2024.03.14
grid-사이트 및 예제  (0) 2024.03.11
0310-position(static vs relative)  (0) 2024.03.10
0309  (0) 2024.03.09
google-과제  (0) 2024.03.08
'academy/html' Related Articles more