[CSS3]float, flex

float

: CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정

/* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* 전역 값 */
float: inherit;
float: initial;
float: unset;

left :블록의 좌측

right : 블록의 우측

none : 부동하지 않아야 함

inline-start : 블록의 시작쪽에 부동해야 함.  ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.

inline-end : 블록의 끝쪽에 부동해야 함. ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.

flex

: flex속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. 

display : flex;

* flex-direction  : 정렬할 방향을 지정
/*요소의 방향*/
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse; */
            flex-direction: row;

 

* justify-content   : Flex 요소들을 가로선 상에서 정렬
 /*flex 가로 정렬*/
            justify-content: end;
            justify-content: row;
            justify-content: center;
            justify-content: flex-end;
            justify-content: flex-start;
/*flex 가로균등정렬*/
            justify-content: space-around;
            justify-content: space-between;
            justify-content: space-evenly;

 

* align-self : 지정된 align-items 값을 무시하고 Flex 요소를 세로선 상에서 정렬

            align-self : flex-start;

            align-self : flex-end;

            align-self : center;

            align-self : baseline;

            align-self : stretch;

 

* align-content : 세로선 상에 여분의 공간이 있는 경우 Flex 컨테이너 사이의 간격을 조절

            align-content: flex-start;

            align-content: flex-end

            align-content: center

            align-content: space-between

            align-content: space-around

            align-content: space-evenly

            align-content: stretch (default)

           

* align-items : Flex 요소를 세로선 상에서 정렬
/*flex 세로(높이정렬)*/
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            align-items: baseline;

* flex-wrap : Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬
/*줄바꿈*/
            flex-wrap: wrap;

            flex-wrap: wrap-reverse;
            flex-wrap: nowrap;

 

* flex-flow : 다음의 속성들을 간략히 한 속성

: flex-direction and flex-wrap.<flex-direction> <flex-wrap>

 

* order : Flex 요소의 순서를 지정합니다.

<integer> (... -1, 0 (default), 1, ...)

 

FELXBOX FROGGY 플렉스박스를 연습할 수 있는 기초적인 쉬운 게임이다.

https://flexboxfroggy.com/#ko

Flexbox Froggy