Flex/Grid - CSS
flex
CSSプロパティのセットで、コンテンツを並べ替えたり、スペースを区切ったりできます.
displayプロパティ.
// block, inline-block과 유사
display: flex;
display: inline-flex;flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;(マルチラインアイテムの場合+align-content-flex-cainerの縦軸を使用可能)
align-items: stretch; // 기본값
align-items: center;
align-items: flex-start;
align-items: flex-end;
その他のプロパティー
ex)
flex-grow:1->すべてのサブエレメントに同じサイズのスペースが割り当てられます
flex-grow:2->特定のサブエレメントにのみスペースを割り当てる場合、
Grid
display: grid;コンテナに適用されるプロパティ1. 그리드 형태 정의
// 열 세개 1fr로 생성
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
// 행 세개 100px로 생성
grid-template-rows: 100px 100px 100px;
grid-template-rows: repeat(3, 100px);
2. 간격 만들기
row-gap: 10px;
column-gap: 20px;
gap: 10px; // row, column 10px씩- 첫번째 칸 2x2 만들기
1. 시작번호 1~3 지정
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
grid-column: 1 / 3;
grid-row: 1 / 3;
2. 몇개의 셀 차지할 것인지 지정
grid-column: 1 / span 2; // 1번 라인에서 2칸
grid-row: 1 / span 2; // 1번 라인에서 2칸Reference
この問題について(Flex/Grid - CSS), 我々は、より多くの情報をここで見つけました https://velog.io/@jeongki/Flex-CSSテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol