.container
display : block 이게 기본
display : inline-block
display : flex
flex-direction: row 이게 기본
flex-direction: column
justify-content: space-between;
justify-content: space-evenly;
justify-content: space-around;
자식 태그에
flex : 1; 씩 주던지 비율대로 weight주는거다
flex-direction: row 이면
justify는 main axis가 가로인데
세로로 정렬하고 싶을때 (=cross axis)
justify-items: 어느위치
반대로
flex-direction: column이면
justify는 main axis가 세로인데
세로로 정렬하고 싶을때 (=cross axis)
justify-items: 어느위치
flex가 가진 default 속성
자식태그에
grow자리 shrink자리 남는 flex basis
기본 값은 1 1 auto
늘고 줄을 때 1:1비율로 늘고 준다.
반응형으로 아래로 내려가게 하려면
flex-wrap: wrap
input 태그 커스터마이징
https://blog.naver.com/getinthere/221575379734
리액트에서 flex많이 쓰는데 grid가 더 늦게 나와서 좋은데 브라우저에 버전때문에 flex를 더 많이 사용한다.
라이브 서버가 작동안될때가 있어서 체크해두고 진행함
index.html
<html>
<head>
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav class="container">
<div>Home</div>
<div>Search</div>
<div>Logout</div>
</nav>
</body>
</html>
index.css
.container {
border: 5px solid #ffcc5c;
}
basic.css
.container > div {
padding: 10px;
text-align: center;
font-size: 2em;
color: #ffeead;
}
html,
body {
background-color: #ffeead;
margin: 10px;
}
.container > div:nth-child(1) {
background-color: #96ceb4;
}
.container > div:nth-child(2) {
background-color: #ff6f69;
}
.container > div:nth-child(3) {
background-color: #88d8b0;
}
div라서 기본적으로 block임
inline-block은 자신의 크기만큼만 잡는데
남은 여백의 행을 버리고 밑으로 내려옴
flex는 옆으로 간다.
flex-direction: row; 이 기본임.
flex-direction: column; 을 주면 밑으로 내려감
각자의 div들에게 비율을 준것이다.
만약 비율을 바꾸고 싶다면
각자에게 따로 줘야한다.
하나하나 따로 움직일수는 없어서 박스에 담아서 움직여야한다.
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.container {
border: 5px solid #ffcc5c;
display: flex;
flex-direction: row;
justify-content: center;
}
HOME을 왼쪽 Search 중간, Logout을 끝으로 보내고 싶으면
space-between을 써야한다.
space-around를 주면 각각의 크기에 맞게 주어진다.
->사진같은거 그리드로 놓을때 사용
전체 공간을 똑같이 주고 싶으면
justify-content: space-evenly;
한개랑 두개를 따로 담고 싶으면 박스에 담아서 줘야함.
쓰레기 공간(빨간박스)이 있을때 마진으로 조절이 가능함.
이때 얼마나 해야할지 모르므로 고정적으로 px를 주는것보다 auto를 이용함
간단한곳은 이렇게 가능하지만
체계적으로는 div에 담아서 분리함
세로배치
이런현상을 스트래치, 남은공간을 다 차지한다.
justify-content : 가로행
main-Axis(축) 가로
justify type content는 main-Axis를 따라가서 정렬함.
세로
반대축 Cross Axis할때는 align-items
align-items: stretch; 기본값
align-items: flex-start;
align-items: center;
align-items: flex-end;
가로로 정렬할때는 justify-content
세로로 정렬할때는 align-items
그래서 main-Axis 정렬하는 방법은 justify-content로 설정하는것이다.
윈도우 크기를 줄였을때 반응하는 방법
wrap이 있으면 500px을 확보
nowrap은 창크기에 따라 확보하는데 최대 500px까지 확보함
각 css에 flex값을 주면 기본값으로 설정되는것이 있다.
제일 앞에 있는 0 이 grow인데 어디까지 성장할꺼냐라는 뜻인데
grow 자리이며 비율 만들때 사용한다.
중간에 있는 1은 shrink 자리임.
축소될때 영향
마지막 auto는
flex를 했을때 크기를 얼마로 잡을지 결정하는것임
auto를 하면 가지고 있던 크기로 가능
손댈일이 별로 없을것
늘어날대 비율
줄어들때 비율
기본 크기 그대로 따라감
리액트 네이티브할때 flex 사용?
grid가 편하김함
'HTML&CSS' 카테고리의 다른 글
| css overflow: hidden; (0) | 2020.09.08 |
|---|---|
| navigation /ul태그안에 li태그들 앞에 아무것도 안붙이기/ text-decoration: none; /클릭했거나 안하거나 색깔 검정으로 (0) | 2020.08.20 |
| flex grow (0) | 2020.07.01 |
| 배치 position 속성 static, relative, absolute, fixed (0) | 2020.06.22 |
| CSS로 <table>꾸미기 (0) | 2020.03.06 |
