CSS Flexible Box Layout
5364 단어 layout
CSS Flexible Box Layout은 줄곧 새로운 레이아웃 방식을 비교해 왔는데, 현재 지원하는 비교적 좋은 브라우저는 Firefox, 크롬이다.그래서 아래의 예는 Firefox, 크롬 아래에서만 실행해야만 효과를 볼 수 있다.
Flexbox는 디스플레이 속성에 새로운 값(즉 box 값)을 부여하고 8개의 새로운 속성을 제공합니다.
box-orient
box-pack
box-align
box-flex
box-flex-group
box-ordinal-group
box-direction
box-lines
일반적인 Flexbox 스타일 속성
상자 스타일
display: box
이 디스플레이 스타일의 새 값은 이 요소와 직계 서브셋을 탄성 상자 모델에 추가할 수 있습니다.Flexbox 모델은 직계 서브세대에만 적용됩니다.
box-orient
값: horizontal | vertical | inherit
상자의 자대는 어떻게 배열합니까?그리고 두 가지 값이 있습니다: inline-axis (진정한 기본값) 와 Block-axis. 그러나 각각 수평과 수직 방향으로 비칩니다.
box-pack
값: start | end | center | justify
box-orient 축을 따라 상자의 배열 방식을 설정합니다.따라서 box-orient가 수평 방향이면 상자의 하위 세대의 수평 배열 방식을 선택하고 반대로도 마찬가지다.
box-align
값: start | end | center | baseline | stretch
기본적으로 box-pack의 동급 속성입니다.상자의 하위가 상자에 배열되는 방식을 설정합니다.방향이 수평이면 수직 정렬이 결정되고 그 반대도 마찬가지입니다.
상자의 하위 세대에 사용되는 스타일
box-flex
값: 0 | 정수
이 세대의 탄성비.탄성비 1의 자대가 부대상자를 차지하는 공간은 탄성비 2의 동급 속성의 두 배다.기본값은 0입니다. 즉, 탄력성이 없습니다.
위의box-flex-group,box-ordinal-group,box-direction,box-lines 속성은 소개하지 않겠습니다. 솔직히 말하면 대부분의 Flexbox 작품이 이런 것들을 사용하지 않을 것입니다.
다음은 실험을 하는 작은 예입니다. flex box layout으로
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<style type="text/css">
* {
border: none;
margin: 0;
padding: 0;
}
h1 {
font: bold 20px Tahoma;
}
h2 {
font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup {
display: block;
}
body {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center; /* box-orient 。 ， box-orient ， ， 。*/
-webkit-box-align: center;
}
#wrapper {
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box; /* */
-webkit-box-orient: vertical; /* ？ ：inline-axis（ ） block-axis， 。*/
-webkit-box-flex: 1; /* 。 1 2 。 0， 。*/
}
#top_header {
background: yellow;
border: 3px solid black;
padding: 20px;
}
#top_menu {
border: red;
background: #ccc;
color: white;
}
#top_menu li {
list-style: none;
display: inline-block;
padding: 5px;
}
#new_div {
display: -webkit-box;
-webkit-box-orient: horizontal; /* */
border: 1px solid #ccc;
background: #C60;
}
.main_section {
border: 1px solid blue;
-webkit-box-flex: 1; /* div */
margin: 20px;
padding: 20px
}
#side_news {
border: 1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66cccc;
}
#footer {
text-align: center;
padding: 20px;
border-top: 2px solid green
}
</style>
<body>
<div id="wrapper">
<header id="top_header">
<div id="logo"> </div>
<h1>Welcome to this site!</h1>
</header>
<nav id="top_menu">
<ul>
<li><a href="#">Index</a></li>
<li><a href="#">Doc</a></li>
<li><a herf="#">About</a></li>
</ul>
</nav>
<div id="new_div">
<article class="main_section">
<header>
<hgroup>
<h1>Article title</h1>
<h2>Sub title of article</h2>
</hgroup>
</header>
<p>This article is mainly used to introcuce html5 programmer.It's very userful to a new coder;</p>
<footer> written by robter; </footer>
</article>
<article class="main_section">
<header>
<hgroup>
<h1>Article title 2</h1>
<h2>Sub title of article2</h2>
</hgroup>
</header>
<p>This article is mainly used to introcuce html5 programmer.It's very userful to a new coder;</p>
<footer> written by robter; </footer>
</article>
<aside id="side_news">
<h4>News</h4>
<p> Ncik buy a new dog;He love it very much; </p>
</aside>
</div>
<footer id="footer"> <span>Copyright 2012-8 [email protected]</span> </footer>
</div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React Native Reanimated 2 레이아웃 애니메이션 예제은 라이브러리를 사용하여 React Native 구성 요소의 시작, 종료 및 레이아웃 변경에 애니메이션을 적용하는 가장 쉬운 방법입니다. 좋아보이죠? 그리고 구현하기가 매우 쉽습니다! TLDR You can find...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
