@ 이유?
html 하고 다른 부분도 있고 html 에서 안다고 해도 잘 모르고 있던 부분이 많아서 정리
1. alignContent
2. alignItems
3. textAlign
> react-native 에서 text를 중앙에 두기 위한 방법
4. ...StyleSheet.absoluteFillObject,
> position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 을 반복적으로 쓰기 싫을때 대신 커스텀으로 만들수도 있다.
5.
Align Items
Align Items는 배치방향(Flex Direction)으로부터 수직한 정렬을 뜻합니다. column(세로 배치)라면 가로 정렬을 뜻하고, row(가로 배치)라면 세로 정렬을 뜻합니다
Justify Content
Align Items가 Flex Direction으로부터 수직한 정렬이였다면 Justify Content는 수평한, 즉 Flex Direction의 진행 방향과 같은 방향으로 정렬됩니다
주의 점 !!!
flexDirection : row 로 바뀌게 되면 > 위에 그림을 그대로 돌리기 때문에 end , start도 위에 그림 그대로 돌아간다.
align-item , alignself
#main {
width: 220px;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
#myBlueDiv {
-webkit-align-self: center; /* Safari 7.0+ */
align-self: center;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
즉 보여지는 것과 같이 align-self 는 상위 align-self 를 override 해서 적용 시키는 것이다.
position
position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
'FE > React & RN' 카테고리의 다른 글
| [ React ] Class Component (0) | 2019.11.13 |
|---|---|
| [ React ] 생명주기 (0) | 2019.11.13 |
| [ React-Native ] 오류 정리 (0) | 2019.11.11 |
| [ React-Native ] Pixel Density (0) | 2019.11.07 |
| [ React-Native ] Navigation (0) | 2019.11.06 |
댓글