Flexbox가 당연한 지금, float는 언제 사용합니까?
이게 뭐야
display: flex가 대활약하고 있는 2021년에 있어서, float 프로퍼티를 어떻게 사용하는지를 쓴 기사입니다 리포지토리 및 GitHub Pages
이 기사를 쓰기 위해 쓴 코드는 모두 공개하고 있습니다.
실제 외형은 GitHub Pages에서 확인하십시오.
이미지에 텍스트를 넣고 싶을 때가 1번 사용한다고 생각된다
이러한 레이아웃을 조합할 때
float 를 사용할 수 있습니다.이하에 간략화한 코드를 실어 둡니다.
<body>
<h1 class="title">floatをあえて使うなら</h1>
<div class="container -left">
<img src="https://picsum.photos/160?random=1" alt="" width="160" height="160" class="image -float-left" />
<h2>float: left</h2>
<p class="paragraph">Lorem ipsum ~~~</p>
</div>
<div class="container -right">
<img src="https://picsum.photos/160?random=2" alt="" width="160" height="160" class="image -float-right" />
<h2>float: right</h2>
<p class="paragraph">Lorem ipsum ~~~</p>
</div>
</body>
body {
background-color: #f2f2f2;
display: grid;
gap: 16px;
grid-template-columns: 1fr 400px 400px 1fr;
padding: 32px;
}
.title {
grid-column: 2/4;
}
.container {
background-color: #fff;
border-radius: 8px;
padding: 24px;
}
.container.-left {
grid-column: 2/3;
}
.container.-right {
grid-column: 3/4;
}
.container.-two-column {
grid-column: 2/4;
}
.image {
background-color: #dcdcdc;
border-radius: 4px;
}
.image.-float-left {
float: left;
margin-right: 16px;
}
.image.-float-right {
float: right;
margin-left: 16px;
}
.paragraph {
margin-top: 2px;
}
`
구식의 요소를 가로로 늘리는 사용법은 안 되는가?
쓸모 없을 정도는 아닙니다.
생각했던 대로의 레이아웃을 할 수 있어, 코드를 쓰는 사람끼리가 잘 연계할 수 있다면 아무것도 문제는 없을 것입니다.
그러나 복수의 요소를
float 로 옆으로 늘릴 때, 마지막 요소의 float는 해제해 줄 필요가 있습니다.이미지에 일률적으로
float: left마지막 이미지에는 float를 걸지 않았다.
실현하고 싶은 것이 왼쪽의 레이아웃이라면 좋지만, 어느 쪽이라도 오른쪽의 레이아웃을 의도하는 것이 많지 않을까요?
덧붙여서 오른쪽의 코드는 다음과 같이 썼습니다.
<div class="container -two-column">
<img src="https://picsum.photos/160?random=3" alt="" width="160" height="160" class="image -traditional-float" />
<img src="https://picsum.photos/160?random=4" alt="" width="160" height="160" class="image -traditional-float" />
<img src="https://picsum.photos/160?random=5" alt="" width="160" height="160" class="image -traditional-float" />
<h2 class="traditionl-float-headline">横並びとしてのfloat</h2>
<p class="paragraph">Lorem ipsum ~~~</p>
</div>
.image.-traditional-float:not(:last-of-type) {
float: left;
margin-right: 16px;
}
Reference
이 문제에 관하여(Flexbox가 당연한 지금, float는 언제 사용합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/xrxoxcxox/items/a7f17b54d78b674bb07f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
