Flex box配置設定
float、clear和vertical-align屬性在Flex下無效
<div class="box"> <div> </div> </div>
.box{
display: flex;
}
.box{
display: inline-flex;
}
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
Flex屬性
Flex母元素屬性
| flex-direction | box排列方向 |
| flex-wrap | box列是否換行 |
| flex-flow | flex-direction and flex-wrap 的簡寫屬性 例:flex-flow: row wrap; |
| justify-content | box主軸對齊方式 |
| align-items | box垂直對齊方式 |
| align-content | box軸線對齊方式 |
Flex子元素屬性
| order | 指定box排列順序 |
| flex-grow | 指定主box最大比例範圍排列 |
| flex-shrink | box不換行隨內容寬排列 |
| flex-basis | 指定單一個box寬度排列 |
| flex | flex-grow, flex-shrink, and flex-basis 的簡寫屬性 例:flex: 0 0 200px; |
| align-self | 指定單一個box對齊方式 |
屬性介紹
母元素屬性 flex-direction
| row | 預設值，水平排列，起點在左方。 |
| row-reverse | 水平排列，起點在右方。 |
| column | 垂直排列，起點在上方。 |
| column-reverse | 垂直排列，起點在下方。 |
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
母元素屬性 flex-wrap
| nowrap | 不換行 |
| wrap | 第一行在上方 |
| wrap-reverse | 第一行在下方 |
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
母元素屬性 flex-flow
| nowrap | 不換行 |
| wrap | 第一行在上方 |
| wrap-reverse | 第一行在下方 |
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
母元素屬性 justify-content
| flex-start | 預設值，整列靠左 |
| flex-end | 整列靠右 |
| center | 整列居中 |
| space-between | 整列左右對齊，box間距相等 |
| space-around | 整列左右對齊，box含左右內距，內距相等，間距為內距兩倍 |
.box{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
母元素屬性 align-items
| flex-start | box靠上對齊 |
| flex-end | box靠下對齊 |
| center | box垂直置中對齊 |
| baseline | box內容第一行文字對齊 |
| stretch | 預設值，box高度滿版 |
.box{
align-items: flex-start | flex-end | center | baseline | stretch;
}
母元素屬性 align-content
| flex-start | 多列靠上 |
| flex-end | 多列靠下 |
| center | 多列置中 |
| space-between | 多列上下對齊排列，行距相等 |
| space-around | 多列等距上下排列，含上下內距，，內距相等，上下行距為內距兩倍 |
| stretch | 預設值，多列等距上下排列 |
.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
子元素屬性 order
定義排列順序小到大，數值越小，排列越前面。
.box div{
order: <integer>; /* default 0 */
}
.box div{
order: 0;
}
//例 <div class="box"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
子元素屬性 flex-grow
依照數值比例排列，1為同比例排列。
.box div{
flex-grow: <number>; /* default 0 */
}
.box div{
flex-grow: 1;
}
//例 <div class="box"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div>
子元素屬性 flex-shrink
flex-shrink數值為1，所有元素等比例。其中一個元素flex-shrink為0，該元素依照內容比例排列。
.box div{
flex-shrink: <number>; /* default 1 */
}
.box div{
flex-shrink: 0;
}
//例 <div class="box"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div>
子元素屬性 flex-basis
強制為元素設寬高，如未設定則等比例排列。
.box div{
flex-basis: <length> | auto; /* default auto */
}
.box div{
flex-basis: 200px;
}
//例 <div class="box"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div> </div>
子元素屬性 flex
flex-grow，flex-shrink和flex-basis的簡寫。
.box div{
flex: none | [ <'flex-grow'> <'flex-shrink'> | <'flex-basis'> ]
}/* default 0 1 auto */
.box div{
flex: flex: 0 0 200px;
}
//例 <div class="box"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div>
子元素屬性 align-self
對單一元素設定屬性，繼承align-items屬性，覆蓋align-items屬性。
.box div{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
//例 <div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div> //例 <div class="box"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div>
Flex 範例
Flex box基本配置
//例 <div class="container"> <nav>logo</nav> <div class="flex-column">flex-column</div> </div>
.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}
Flex 網頁配置
//例
<!-- Note -->
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>
<!-- Header -->
<div class="header">
<h1>My Website</h1>
<p>With a <b>flexible</b> layout.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
Flexbox 置中配置
//例 <div class="flex-container"> <div>置中配置</div> <div>
.flex-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
Flex 瀑布式圖片排列
//例
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/falls2.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
<img src="/w3images/nature.jpg" style="width:100%">
<img src="/w3images/mist.jpg" style="width:100%">
<img src="/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="/w3images/underwater.jpg" style="width:100%">
<img src="/w3images/ocean.jpg" style="width:100%">
<img src="/w3images/wedding.jpg" style="width:100%">
<img src="/w3images/mountainskies.jpg" style="width:100%">
<img src="/w3images/rocks.jpg" style="width:100%">
<img src="/w3images/underwater.jpg" style="width:100%">
</div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
