정요섭

정요섭

Front-end 개발자가 되기 위한 코린이

16.flexbox로 만들수 있는 10가지 레이아웃

5 minute read

네이버 개발사이트를 참고함

flexbox 레이아웃(1)

1.스크롤 없는 100% 레이아웃

<div id="wrap" class="wrap">
  <header class="header"></header>
  <div class="tablist"></div>
  <div class="content">
    <div class="aside"></div>
    <div class="main"></div>
  </div>
</div>

html,
body {
  height: 100%;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
  height: 65px;
  background-color: #00c73c;
}
.tablist {
  height: 70px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  background-color: white;
}

.content {
  display: flex;
  flex: 1;
}
.aside {
  display: flex;
  flex: none;
  width: 400px;
  background-color: #bfbab078;
}
.main {
  display: flex;
  flex: 1;
  overflow: auto;
}

2.내비게이션 영역

<header class="header">
  <div class="logo">logo</div>
  <div class="search">
    <input type="text" title="검색" class="search_input" />
    <button type="button" class="search_button">검색</button>
  </div>
  <div class="gnb">gnb</div>
</header>

.header {
  display: flex;
  background-color: #00c73c;
}
.gnb,
.logo,
.search {
  flex: none;
  /* flex-grow: 0; flex-shrink: 0; flex-basis: auto; */
}

.search {
  margin-left: auto;
}

.gnb {
  margin-left: auto;
}

.logo,
.gnb {
  padding: 20px 30px;
  background-color: rgba(0, 0, 0, 0.4);
}
.search {
  display: flex;
  width: 400px;
  padding: 14px 0;
  margin-left: 10px;
}
.search_button {
  width: 37px;
  border: 0;
  background-color: #26a93a;
}
input {
  flex: 1;
  /* 1 1 0 */
  width: 322px;
  height: 37px;
  background-color: white;
}

3.브라우저 화면 아래에 붙는 푸터

<body>
  <div class="map_wrap">
    <footer class="footer">
      <div class="land_information">
        <a
          href="http://www.naver.com/policy/service.html"
          class="land_information_link"
          target="_blank"
          >이용약관</a
        ><a
          href="http://land.naver.com/index/declaredArticlePolicy.nhn"
          class="land_information_link"
          target="_blank"
          >매물신고운영</a
        ><a
          href="http://policy.naver.com/rules/privacy.html"
          class="land_information_link important"
          target="_blank"
          >개인정보처리방침</a
        ><a
          href="https://help.naver.com/support/service/main.nhn?serviceNo=746"
          class="land_information_link"
          target="_blank"
          >부동산 고객센터</a
        >
      </div>
      <p class="land_alert">
        네이버부동산은 제휴 부동산 정보업체가 전송한 매물 정보가 노출될 수
        있도록 광고 플랫폼 및 부동산 관련 정보를 제공하며, 제휴 부동산
        정보업체가 네이버 부동산으로 전송한 매물 정보 및 이와 관련한 실제 거래에
        대하여 어떠한 책임도 부담하지 않습니다.
      </p>
      <div class="land_copyright">
        <a href="#" target="_blank" aria-label="네이버"
          ><i class="icon icon_naver_logo" aria-hidden="true"></i></a
        >Copyright ⓒ
        <a
          href="http://www.navercorp.com/ko/index.nhn"
          target="_blank"
          class="land_copyright_point"
          >NAVER Corp.</a
        >
        All Rights Reserved.
      </div>
    </footer>
  </div>
</body>

.map_wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.footer {
  background-color: white;
  height: 100px;
}

4.정렬이 다른 메뉴

<ul class="tablist">
  <li>
    <a href="#" class="tab selected">HOME</a>
  </li>
  <li>
    <a href="#" class="tab">CHANNELS</a>
  </li>
  <li>
    <a href="#" class="tab">VIDEOS</a>
  </li>
</ul>

ul,
li {
  list-style: none;
}
div,
ul,
li,
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
.tablist {
  display: flex;
  justify-content: space-between;
  flex: 0 0 60px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
}
.tab {
  position: relative;
  display: block;
  line-height: 60px;
  font-weight: bold;
  padding: 0 15px;
}
.tab.selected:after {
  position: absolute;
  bottom: 19px;
  left: 13px;
  right: 13px;
  height: 9px;
  background: rgba(0, 209, 69, 0.7);
  content: "";
}

5. 폼 레이블 수직 중앙 정렬

<div class="ui_box">
  <h3>폼 타이틀 수직 중앙정렬</h3>
  <div class="row_wrap">
    <div class="row">
      <span class="title_content">채널 키워드</span>
      <input
        class="txtfield"
        type="text"
        name="search"
        placeholder="키워드와 키워드 사이는 쉼표(콤마)로 구분해주세요."
      />
    </div>
    <div class="row">
      <span class="title_content">Channel keyword</span>
      <input
        class="txtfield"
        type="text"
        name="search"
        placeholder="키워드와 키워드 사이는 쉼표(콤마)로 구분해주세요."
      />
    </div>
    <div class="row">
      <span class="title_content big">채널 키워드</span>
      <input
        class="txtfield big"
        type="text"
        name="search"
        placeholder="키워드와 키워드 사이는 쉼표(콤마)로 구분해주세요."
      />
    </div>
    <div class="row">
      <span class="title_content big">Channel keyword </span>
      <input
        class="txtfield big"
        type="text"
        name="search"
        placeholder="키워드와 키워드 사이는 쉼표(콤마)로 구분해주세요."
      />
    </div>
    <div class="row">
      <span class="title_content big">Channel keyword keyword</span>
      <input
        class="txtfield big"
        type="text"
        name="search"
        placeholder="키워드와 키워드 사이는 쉼표(콤마)로 구분해주세요."
      />
    </div>
  </div>
</div>

h3 {
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
}
.row_wrap {
  width: 400px;
  margin: 0 auto;
}
.row {
  display: flex;
  padding: 10px 0;
}

.txtfield.big {
  height: 150px;
}
.title_content.big {
  height: 150px;
}
.title_content {
  display: flex;
  align-items: center;
  width: 100px;
  height: 40px;
  font-weight: bold;
}
.txtfield {
  flex: 1;
  background-color: white;
  width: 300px;
  height: 38px;
  font-size: 13px;
  padding: 10px;
  box-sizing: border-box;
}

6. 중앙 정렬 아이콘

<div class="wrap">
  <i class="icon icon_360" aria-hidden="true"></i>
</div>

html,
body {
  height: 100%;
}

.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.icon_360 {
  margin: auto;
  font-size: 50px;
}

여기서 알아낸 사실??

부모에 flex를 주면 자식요소는 flex-direction의 방향으로 margin을 가진 block이 된다?

7. 유동 너비 박스

<div class="filter">
  <div class="filter_box">
    가나다라마바사아자차카타파하가나다라마바사아자차카타파하
  </div>
  <div class="filter_box">가나다</div>
  <div class="filter_box">가나다라마바사</div>
  <div class="filter_box">가나다라</div>

  <button type="button" class="btn_refresh">버튼</button>
</div>

.filter {
  display: flex;
  height: 70px;
  padding-left: 8px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  background-color: white;
}
.filter_box {
  flex: 0 1 auto;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 38px;
  padding: 8px;
  background-color: white;
  margin: 16px 8px 0;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.btn_refresh {
  height: 38px;
  margin: 16px 15px 0 auto;
  padding: 9px 11px 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: white;
  font-size: 17px;
  flex: none;
}
.icon {
  display: inline-block;
  font-family: "space_icon";
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
}

8. 말줄임과 아이콘

<div class="list_fixed">
  <div class="title_wrap">
    <h3 class="title">조건에 맞는 총 10000000개의 매물이 있습니다.</h3>
    <span class="school_type" role="img" aria-label="가정"
      ><i class="sp_icon"></i
    ></span>
    <span class="school_type" role="img" aria-label="통학차량"
      ><i class="sp_icon"></i
    ></span>
    <span class="school_type" role="img" aria-label="공립"
      ><i class="sp_icon"></i
    ></span>
  </div>
</div>

.list_fixed {
  height: 60px;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.title_wrap {
  display: inline-flex;
  max-width: 100%;
  height: 100%;
  align-items: center;
}
.title_wrap .title {
  overflow: hidden;
  padding-top: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}
.school_type {
  margin-left: 4px;
}
.school_type[aria-label="가정"] .sp_icon {
  background-position: -253px -62px;
  width: 26px;
  height: 16px;
}
.sp_icon {
  display: inline-block;
  vertical-align: middle;
  background-image: url(https://test-img.land.naver.com/static/beta-service/ver/feature-828/pc/img/sprites/sp_map.png);
  background-image: url(https://test-img.land.naver.com/static/beta-service/ver/feature-828/pc/img/sprites/sp_map.svg),
    none;
  background-size: 283px 249px;
}

.school_type[aria-label="통학차량"] .sp_icon {
  background-position: -132px -34px;
  width: 44px;
  height: 16px;
}
.sp_icon {
  display: inline-block;
  vertical-align: middle;
  background-image: url(https://test-img.land.naver.com/static/beta-service/ver/feature-828/pc/img/sprites/sp_map.png);
  background-image: url(https://test-img.land.naver.com/static/beta-service/ver/feature-828/pc/img/sprites/sp_map.svg),
    none;
  background-size: 283px 249px;
}
.school_type[aria-label="공립"] .sp_icon {
  background-position: -148px -206px;
  width: 26px;
  height: 16px;
}
.sp_icon {
  display: inline-block;
  vertical-align: middle;
  background-image: url(https://test-img.land.naver.com/static/beta-service/ver/feature-828/pc/img/sprites/sp_map.png);
  background-image: url(https://test-img.land.naver.com/static/beta-service/ver/feature-828/pc/img/sprites/sp_map.svg),
    none;
  background-size: 283px 249px;
}

9. 위아래로 흐르는 목록

<div class="ui_box">
  <h3>상하 정렬 롤링 리스트</h3>
  <div class="photo_container">
    <ul class="photo_list column">
      <li class="photo_box">
        <div class="photo"></div>
        <div class="description">Title1</div>
      </li>
      <li class="photo_box">
        <div class="photo"></div>
        <div class="description">Title2</div>
      </li>
      <li class="photo_box">
        <div class="photo"></div>
        <div class="description">Title3</div>
      </li>
      <li class="photo_box">
        <div class="photo"></div>
        <div class="description">Title4</div>
      </li>
    </ul>
  </div>
</div>

body {
  background: #eee;
}
h3 {
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
}

.photo_container {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
}
.photo_list {
  display: flex;
  width: 450px;
  height: 400px;
  border: 3px solid #000;
  align-content: space-around;
  justify-content: space-around;
}
.photo_list.column {
  flex-flow: column wrap;
}
.photo_box {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 180px;
  background: #fff;
}
.photo {
  width: 100%;
  height: 120px;
  background-color: gray;
}
.description {
  flex: auto;
}

10. 가로세로 비율을 유지하는 반응형 박스

<div class="ui_box">
  <h3>가로세로 비율을 유지하는 반응형 박스</h3>
  <ul class="channel_list">
    <li class="item">
      <div class="thumb">
        <img
          class="image"
          src="http://thumbnail.egloos.net/600x0/http://pds21.egloos.com/pds/201811/13/74/d0014374_5beaaeb116477.jpg"
          width="100%"
          height="100%"
        />
      </div>
      <strong class="title">
        가나다라마바사아자차카타파하
      </strong>
    </li>
    <li class="item">
      <div class="thumb"></div>
      <strong class="title">
        가나다라마바사
      </strong>
    </li>
    <li class="item">
      <div class="thumb">
        <img
          class="image"
          src="http://thumbnail.egloos.net/600x0/http://pds21.egloos.com/pds/201811/13/74/d0014374_5beaaeb116477.jpg"
          width="100%"
          height="100%"
        />
      </div>
      <strong class="title">
        가나다라마바사
      </strong>
    </li>
    <li class="item">
      <div class="thumb">
        <img
          class="image"
          src="http://thumbnail.egloos.net/600x0/http://pds21.egloos.com/pds/201811/13/74/d0014374_5beaaeb116477.jpg"
          width="100%"
          height="100%"
        />
      </div>
      <strong class="title">
        가나다라마바사아자차카타파하
      </strong>
    </li>
    <li class="item">
      <div class="thumb">
        <img
          class="image"
          src="http://thumbnail.egloos.net/600x0/http://pds21.egloos.com/pds/201811/13/74/d0014374_5beaaeb116477.jpg"
          width="100%"
          height="100%"
        />
      </div>
      <strong class="title">
        가나다라마바사아자차카타파하
      </strong>
    </li>
  </ul>
</div>

h3 {
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
}
.channel_list {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.item {
  display: flex;
  flex-direction: column;
  flex: none;
  flex-basis: 33.33%;
  margin-top: 20px;
  padding: 0 5px;
  box-sizing: border-box;
}
.thumb {
  flex: auto;
  background-color: #dcdcdf;
}
.image {
  vertical-align: top;
}
.channel_list .title {
  flex: none;
  flex-basis: 40px;
  min-height: 0;
  margin-top: 10px;
  font-size: 13px;
}

Tags:

Categories:

Updated:

Leave a comment

You may also enjoy