> 웹 프론트엔드 > CSS 튜토리얼 > CSS Flex 사용에 대한 자세한 설명

CSS Flex 사용에 대한 자세한 설명

Guanhui
풀어 주다: 2020-07-18 17:47:51
앞으로
2720명이 탐색했습니다.

CSS Flex 사용에 대한 자세한 설명

1. Flex를 사용하여 P를 배치하고 다른 P를 다른 p

내부에서 수평으로 수직으로 중앙으로 사용할 수 있습니다. html 코드 :

<p class="container">
	<p class="box">

	</p>
	</p>
로그인 후 복사
e

css code :

.container{
	width:600px;
	height:400px;
	border:1px solid blue;
	display: flex;
	justify-content:center;
	align-items:center;
	}
	.box{
	width:200px;
	height:100px;
	border:1px red solid;
로그인 후 복사

. ps: 이렇게 가로, 세로 중앙에 배치할 수 있습니다

2. flex의 속성

<p class="items">
	<p class="item">1</p>
	<p class="item">23</p>
	<p class="item">4</p>
	</p>
로그인 후 복사

항목에 쓸 수 있는 속성은 6가지입니다:

•flex-direction
•flex-wrap
• flex-flow
•justify -content
•align-items
•align-content

항목에 쓸 수 있는 항목은 6개입니다.

•order//변경을 원하는 경우 별도로 제공되는 항목입니다. 해당 항목의 순서에 따라 이 속성을 해당 항목에 부여합니다
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self

위 내용은 CSS Flex 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:jb51.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿