CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법

青灯夜游

Sep 08, 2018 pm 03:42 PM

웹 프런트엔드 웹페이지 개발 및 디자인 과정에서 레이아웃은 매우 중요한 부분입니다. 레이아웃은 페이지에 있는 다양한 구성 요소와 요소의 크기와 위치를 결정하는 데 사용됩니다. 이 장에서는 CSS3 레이아웃 모델인 플렉스 박스 모델(flex box)을 소개합니다. 이를 통해 CSS3의 플렉스 박스가 무엇인지, flex 및 box 속성 값의 차이점과 사용법을 이해할 수 있습니다. 플렉스 박스의 표시 속성. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1: 유연한 상자란 무엇입니까
CSS3 유연한 상자(Flexible Box 또는 Flexbox)는 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다. Flexbox 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 빈 공간을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다. 일반적인 복잡한 레이아웃 요구사항을 간단한 방법으로 충족할 수 있습니다. 장점은 개발자가 특정 구현 방법을 제공하지 않고 레이아웃이 가져야 하는 동작만 선언한다는 것입니다. 브라우저는 실제 레이아웃을 담당합니다. 이 레이아웃 모델은 주요 브라우저에서 지원됩니다.

2: CSS3 가변 상자 콘텐츠
유연한 상자는 유연한 컨테이너(Flex 컨테이너)와 유연한 하위 요소(Flex 아이템)로 구성됩니다.
유연한 컨테이너는 display 속성의 값을 flex 또는 inline-flex로 설정하여 유연한 컨테이너로 정의됩니다.
유연한 컨테이너에는 하나 이상의 유연한 하위 요소가 포함되어 있습니다.
참고: 유연한 컨테이너 외부와 유연한 하위 요소 내부는 정상적으로 렌더링됩니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다.

3: display:box와 display:flex

1. display:box는 주로 상위 컨테이너에 있는 하위 요소의 배열, 순서 및 수직(수평) 정렬을 제어합니다.

display:box는 2009년 이전 구문은 오래되었으며 해당 접두사를 사용해야 합니다.

그래서 호환성 코드는 대략 다음과 같습니다

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex;

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹性盒子--display: box;</title>
		<style>
			.box {
				width: 330px;
				height: 400px;
				border: 1px #000 solid;
				margin: 0 auto;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -o-box;
				display: box;
				}
				
				.box p {
				width: 100px;
				height: 20px;
				background: #000;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>123</p>
			<p>123</p>
			<p>123</p>
		</div>
	</body>
</html>

Rendering:

CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법

부모 요소에 디스플레이:상자 텔레스코픽 상자 속성을 선언하면 상자 전체가 블록 요소라는 의미입니다. 인라인 요소가 되면 상위 요소 내의 하위 요소는 자유롭게 공간을 할당할 수 있습니다. 각 블록 요소가 자체 줄을 차지하는 대신 한 줄에 함께 배열되도록 협상됩니다. 예를 들어, 위의 예에서는 div에 있는 세 개의 p 태그가 계층적으로 분산되지 않고 한 행에 표시됩니다.

두 번째: display:flex는 주로 상위 컨테이너의 너비에 따라 특정 규칙에 따라 하위 컨테이너를 나눌 수 있도록 합니다.

display:flex;는 2011년 이후에 등장했으며 앞으로는 대부분의 새 브라우저에서 표준 구문이 될 것입니다. 기본적으로는 사용하지 않습니다. 현재는 Apple 브라우저에만 webkit 접두사가 있어야 하며 나머지는 정상적으로 표시될 수 있습니다.

새 버전은 텔레스코픽 상자의 표시 속성을 다음과 같이 설정합니다.
display:flex; 컨테이너 상자 모델을 블록 수준의 탄성 상자로 표시합니다(새 버전)
display:inline-flex; 컨테이너 상자 모델을 인라인 수준의 탄성 상자로 표시(새 버전)

Usage:

우선 flex를 사용하려면 상위 컨테이너가 필요하며, 상위 컨테이너.

상위 컨테이너: 컨테이너

속성:

　display:flex;/*flex block level, inline-flex: inline fast*/

　justify-content:space-around;/*center:horizontally centered, flex-start:close Left; flex-end: 오른쪽으로; space-between: 양쪽으로 기울이고 가운데로 균등하게 나눔; space-around: 완벽하게 균일한 분포*/

　 align-items: Stretch;/*center : 수직 중심, flex-start: 상단으로, flex-end: 하단으로, space-between, space-around*/　

　 flex-direction: 행;/*열은 위에서 아래로, 열-역방향으로 배열 , 행: 왼쪽에서 오른쪽으로, 행 역방향: 오른쪽에서 왼쪽으로*/

　flex-wrap:wrap;/*여러 줄 표시 줄 바꿈(상위 컨테이너가 표시하기에 충분하지 않은 경우 위에서 아래로), nowrap(컨테이너의 너비가 충분하지 않으면 하위 요소가 상위 컨테이너의 너비 또는 높이를 이등분합니다), Wrap-reverse: 아래에서 위로 */

/*flex-flow는 flex-direction의 약어입니다. flex-wrap*/

예:

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>弹性盒子--display:flex;</title>
  <style>
    .container{
       width:600px;
       height:400px;
       border:1px solid #000;
       display:flex;/*flex块级，inline-flex:行内快*/
       justify-content:space-around;
       align-items:stretch;
       flex-direction: row;
       flex-wrap:wrap;
       /*flex-flow是flex-direction、flex-wrap的缩写*/
    }
    .box{
    　　width:200px;
     　 height:100px;
        border:1px solid #000;
     }
   </style>
 </head>
 <body>
     <div>
　　　　   <div>这是中间的box1</div>
        　<div>这是中间的box2</div>
　　　</div>
 </body>
</html>

Rendering:

CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법

Flex 레이아웃으로 설정한 후에는 하위 요소의 부동, 투명 및 수직 정렬 속성이 유효하지 않습니다.

위 내용은 CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。

css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。

css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形；只需创建一个45度的线性渐变，设置渐变色为两种固定颜色，一个是三角形的颜色，另一个为透明色即可，语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。

一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器，聊聊该选择器的作用和使用方法，希望对大家有所帮助！

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.