부동 및 부동 상자 정보
입문
어느날 Adventcalendar의 날은 Qiita로 돌아갔습니다!
이번에는 우리가 아직 이해할 수 없는 플로트와 플렉스박스의 차이점을 정리했다.
본론
여러분은 요소를 가로로 배열할 때 무엇을 사용하시나요?
나는 Float, Flexbox, Float, Flexbox 등 여러 가지 방법이 있다고 생각한다.
그럼 이번 플로트와 플렉스박스는 뭐가 다를까요?나는 어느 것이 좋은지 이 두 가지 관점을 이용하여 보도를 쓰고 싶다.
이번에는 Float·Flexbox를 사용하여 다음과 같이 표시하기 위해 코드를 기술합니다.
Float
<body>
<style>
<!-- ブラウザが持っているCSSをリセットするため -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cleafix::after {
content: "";
display: block;
clear: both;
}
.test {
width: 400px;
height: 300px;
margin: 0 auto;
padding: 5px;
background-color:aqua;
}
.box_A {
width: 100px;
height: 100px;
margin-right: 5px;
background-color: blue;
float: left;
}
.box_B {
width: 100px;
height: 100px;
margin-right: 5px;
background-color: yellow;
float: left;
}
.box_C {
width: 100px;
height: 100px;
margin-right: 5px;
background-color: red;
float: left;
}
footer{
width: 400px;
height: 100px;
margin: 0 auto;
background-color: purple;
}
</style>
<div class="test clearfix">
<div class="box_A"></div>
<div class="box_B"></div>
<div class="box_C"></div>
</div>
<footer></footer>
</body>
Points
.clearfix::after {} 감기 방지
`::after`
선택기 요소 다음에 스타일 또는 요소 추가
`content: "";`
부동 요소의 부모 요소 다음에 공백 요소 삽입
`display: block;`:
콘텐츠 속성에 삽입된 공백을 벽처럼 가로로 늘입니다.
`clear:both;`:
디스플레이 특성으로 만들어진 벽을 둘러싼 플로트의 회전을 해제하는 기능을 제공합니다.
`float:left;`:
부동할 요소에 부동 속성을 설명합니다.
Flexbox
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.f-container {
width: 400px;
height: 300px;
margin: 0 auto;
padding: 5px;
display: flex;
<!-- conteiner（親要素に使用できるプロパティを紹介したいがために書いたおまけ -->
flex-flow: row wrap;
background-color: aqua;
}
.item_A {
width: 100px;
height: 100px;
margin-right: 5px;
background-color: blue;
}
.item_B {
width: 100px;
height: 100px;
margin-right: 5px;
background-color: yellow;
}
.item_C {
width: 100px;
height: 100px;
background-color: red;
}
footer {
width: 400px;
height: 100px;
margin: 0 auto;
background-color: purple;
}
</style>
<div class="f-container">
<div class="item_A"></div>
<div class="item_B"></div>
<div class="item_C"></div>
</div>
<footer></footer>
</body>
Points
Float에서 작은 요소에 Float 속성을 써서 돌아가는 것을 방지하기 위해 `.clearfix::after {}`를 작성한 적이 있지만, Flexbox는 부모 요소에서'display:flex'로 기술하면 Float와 같은 내용을 표시할 수 있습니다.
부모 요소에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.이번에 보여주고 싶은 것은 직접적인 관련이 없지만 부요소로 사용할 수 있는 용기의 편리한 속성으로 소개됐다.
총결산
최근 몇 년 동안, 위에서 말한 바와 같이flexbox는 매우 간단하게 요소를 가로로 배열할 수 있다.
여러분도 Flexbox로 코드를 쉽게 쓰셔야 합니다.
참고 자료
여기 (flexbox): https://webdesign-trends.net/entry/8148
Reference
이 문제에 관하여(부동 및 부동 상자 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/koseiinfratop/items/d569b019823a1c00fae2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
