Flexbox용 CSS 트릭은 Flexbox 및 기타 CSS Flexbox 트릭 속성을 사용하여 컨테이너를 조정, 디자인 및 배치하는 데 필수적입니다. CSS 트릭 속성과 여러 속성 값은 플렉스 박스 디자인과 해당 데이터에 사용됩니다. CSS 트릭을 사용하여 Flexbox의 정렬, 위치, 공간 및 기타 디자인을 설정할 수 있습니다.

다음 CSS 트릭 형식은 Flexbox를 디자인하는 데 사용됩니다.

• Flecbox 방향을 위한 CSS 트릭
• Flexbox 정렬을 위한 CSS 트릭
• Flexbox 여백을 위한 CSS 트릭

플렉스 방향

flex-direction은 flexbox 내부의 컨테이너 방향을 가져오는 데 사용됩니다. 요구 사항에 따라 컨테이너를 설정할 수 있습니다.

통사론:

다음 구문은 Flexbox에 CSS 트릭을 사용합니다. 플렉스 방향에 다른 CSS 속성을 사용할 수 있습니다.

 display: flex; flex-direction: row | row-reverse | column | column-reverse; 

설명:

• 컨테이너나 요소에 대해 기본적으로 flex와 함께 디스플레이를 사용할 수 있습니다.
• Flex 방향은 행, 열 및 역방향 값과 함께 CSS 속성을 사용합니다.

Flex 방향의 예

다음 예는 Flex 속성과 값을 표시하는 Flexbox를 보여줍니다. 내용, 정렬, 방향을 조정할 수 있습니다.

예시 1:

다음 예에서는 기본적으로 시작 위치가 있는 행, 정렬 및 콘텐츠가 포함된 flex-direction을 보여줍니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

산출:

출력에는 CSS 트릭이 포함된 Flexbox가 표시됩니다.

예 2:

다음 예에서는 행 반전이 있는 flex-direction을 보여 주며, 내용은 기본적으로 시작 위치를 보여줍니다. 반대쪽 행에는 수평 정렬이 적용된 끝에서 시작까지의 태그가 표시됩니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

산출:

출력에는 CSS 트릭이 포함된 Flexbox가 표시됩니다.

예시 3:

다음 예에서는 기본적으로 시작 위치가 있는 열, 정렬 및 콘텐츠가 포함된 flex-direction을 보여줍니다. 열에는 수직 정렬로 시작부터 끝까지 태그가 표시됩니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

산출:

GB는 무엇입니까?

출력에는 CSS 트릭이 포함된 Flexbox가 표시됩니다.

예시 4:

다음 예는 열 반전이 있는 flex-direction을 보여 주며, 정렬은 기본적으로 시작 위치로 표시됩니다. 반대 열에는 수직 정렬이 포함된 끝에서 시작까지의 태그가 표시됩니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column-reverse; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

산출:

출력에는 CSS 트릭이 포함된 Flexbox가 표시됩니다.

플렉스 정렬 요령

Flex는 CSS 트릭이나 속성과 함께 정렬 및 콘텐츠 위치를 사용합니다.

통사론:

다음 구문은 Flexbox 정렬을 위해 CSS 트릭을 사용합니다.

 display: flex | inline-flex; flex-direction: row | row-reverse | column | column-reverse; align-self: flex-start | flex-end | center | baseline | stretch; justify-content: start | end | center | space-between | space-around | space-evenly; 

설명:

• 컨테이너나 요소에 대해 기본적으로 flex와 함께 디스플레이를 사용할 수 있습니다.
• Flexbox 정렬은 시작, 끝, 중심 및 기타 CSS 트릭 값으로 설정됩니다.
• 콘텐츠는 'justify-content' 속성을 사용하여 Flexbox에 설정됩니다.

예

다음 예에서는 다양한 값을 가진 콘텐츠와 Flexbox 위치를 보여줍니다.

예시 1:

다음 예는 행의 flex-direction, 끝과의 정렬 및 끝 위치와 함께 표시된 justify-content를 보여줍니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: end; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

산출:

출력에는 CSS 트릭이 포함된 Flexbox가 표시됩니다.

예 2:

Flexbox는 justify-content 속성을 사용하여 중앙 위치에 컨테이너를 표시합니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; align-self: flex-end; justify-content: center; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

산출:

출력에는 CSS 트릭이 포함된 Flexbox가 표시됩니다.

예시 3:

Flexbox는 justify-content 속성을 사용하여 태그 주위에 공백이 있는 컨테이너를 표시합니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

산출:

출력에는 CSS 트릭이 포함된 Flexbox가 표시됩니다.

자바 끝 for 루프

예시 4:

Flexbox는 justify-content 속성을 사용하여 태그 주위에 공백이 있는 컨테이너를 표시합니다. 속성의 인라인 플렉스 값과 함께 디스플레이를 사용할 수 있습니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: inline-flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

산출:

출력에는 CSS 트릭이 포함된 Flexbox가 표시됩니다.

Flexbox 여백을 위한 CSS 트릭

CSS 속성을 사용하여 Flexbox와 해당 하위 상자에 여백과 패딩을 설정할 수 있습니다. 기본 Flexbox CSS 트릭과 표시 상자에 대한 값을 설정할 수 있습니다. 그런 다음 CSS 속성을 추가하여 Flexbox 하위 요소의 여백을 설정합니다.

Java에서 int를 문자열로 변환

통사론

여백을 설정하기 위해 Flexbox의 하위 요소에 다음 구문이 사용됩니다.

 Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } 

예

다음 예에서는 하위 요소에 CSS 트릭을 사용하여 여백과 디자인을 설정합니다.

예시 1:

다음 예제에서는 Flexbox 컨테이너의 첫 번째 요소에 대한 여백과 안쪽 여백을 설정합니다. 여백 값, 글꼴 크기, 배경색을 필요한 값에 맞게 설정할 수 있습니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; div:first-child { background-color: red; margin: 20px; padding: 30px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> The first child of flexbox set with different CSS tricks </p> CSS Flex Tricks 

산출:

출력에는 첫 번째 요소의 여백이 표시됩니다.

예 2:

다음 예제에서는 Flexbox 컨테이너의 세 번째 요소의 여백과 안쪽 여백을 설정합니다. 다양한 배경색으로 margin-auto 값을 설정할 수 있습니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; div:last-child { background-color: yellow; margin-left: auto; padding: 10px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks 

산출:

출력에는 첫 번째 요소의 여백이 표시됩니다.

예시 3:

다음 예제에서는 Flexbox 컨테이너의 마지막 요소의 여백과 안쪽 여백을 설정합니다.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; .clip3{ background-color: orange; margin: auto; padding: 10px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks Study 

산출:

출력에는 첫 번째 요소의 여백이 표시됩니다.

결론

CSS 트릭은 속성과 해당 값을 사용하여 Flexbox 디자인을 설정합니다. CSS Flexbox의 필수 형식을 얻기 위해 여러 디자인과 트릭을 사용할 수 있습니다.