CSS flexbox & grid layouts

박재욱·2022년 3월 6일
0

CSS

목록 보기
1/1
post-thumbnail

flexbox layouts

서치 폼 ( input + btn )

  <form action="" class="formm">
    <div class="wrapper">
      <input type="text" id="text">
      <input type="submit" id="submit" value="Send">
    </div>
  </form>

<style>
 .wrapper{
    display: flex;
  }

  #text{
    flex: 1 1 auto;
  }
</style>

네비게이션 분리하기

<nav>
    <ul>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3 is longer</li>
        <li class="push-right">Page 4</li>
    </ul>
</nav>

<style>
	ul {
      display: flex;
      justify-content: space-around;
      gap: 20px;
    }
    .push-right {
      margin-left: auto;
    }
</style>

말 줄임표(...)

<style>
.flex_container {
  display: inline-flex;
  max-width: 100%;
}

.text {
  	/*flex: 0 1 auto*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

Using Flexbox and text ellipsis together

References

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

MDN - Typical use cases of Flexbox

profile
보초

0개의 댓글