2. 程式人生 > >CSS3布局之flex布局效果

CSS3布局之flex布局效果

阿新 • • 發佈：2017-09-01
方向 fff lang 距離 absolut 換行 row pla containe

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

*{
margin: 0;
padding: 0;
}
.container{
width: 1000px;
margin:0 auto;
}
header{
text-align: center;
line-height: 60px;
}
section{
width: 1000px;
height: 300px;
margin:10px 0;
border:2px solid #ddd;
border-radius: 10px;
background: #fff;
position: relative;
}
section h3{
width: 1000px;
height: 300px;
text-align: center;
line-height: 200px;
color: orange;
background: rgba(0,0,0,0.1);
border-radius: 10px;
display: none;
position: absolute;
top:0;
left:0;
}
section:hover h3{
display: block;
}
.content{
/*margin:25px 0;*/
width: 200px;
height: 150px;
background-image: linear-gradient(#eee,#abc);
border:1px solid purple;
text-align: center;
font-family: "黑體";
color: blue;
font-size: 40px;
}

.item:nth-of-type(1) .content,
.item:nth-of-type(2) .content,
.item:nth-of-type(3) .content,
.item:nth-of-type(4) .content,
.item:nth-of-type(5) .content{
margin:25px auto;
}
.item:nth-of-type(1){
/*將當前元素的父元素設置為flex布局方式,會自動對子元素進行伸縮布局*/
display: flex;
}

.item:nth-of-type(2){
display: flex;
}
.item:nth-of-type(3){
display: flex;
/*column:表示將主軸方向改為列方向從上到下;*/
flex-direction: column;
}
.item:nth-of-type(4){
display: flex;
/* row-reverse:表示將主軸方向改為從右到左;*/
flex-direction: row-reverse;
}
.item:nth-of-type(5){
display: flex;
/* row-reverse:表示將主軸方向改為從下到上;*/
flex-direction: column-reverse;
}

.item:nth-of-type(6){
display: flex;
/*默認值:主軸上的內容在主軸開始方向進行布局;*/
justify-content: flex-start;
}
.item:nth-of-type(7){
display: flex;
/*默認值:主軸上的內容在主軸開始方向進行布局;*/
justify-content: flex-end;
}
.item:nth-of-type(8){
display: flex;
flex-direction: row-reverse;
}
.item:nth-of-type(9){
display: flex;
justify-content: center;
}

/*區別:
1.space-around 每個伸縮項兩邊的左右外邊距相等,伸縮項和伸縮容器的外邊距是兩個伸縮項之間的距離的一半
2.space-between 兩個伸縮項之間的距離相等,不考慮伸縮項與伸縮容器的邊距

;*/
.item:nth-of-type(10){
display: flex;
justify-content: space-around;
}
.item:nth-of-type(11){
display: flex;
justify-content: space-between;
}

.item.h500{
height: 600px;
display: flex;
}
.item.h500 h3{
height: 600px;
}
.item:nth-of-type(12){
/*內容分布在側軸的起始位置一段*/
align-items: flex-start;
}
.item:nth-of-type(13){
/*內容分布在側軸的末尾位置一段*/
align-items: flex-end;
}
.item:nth-of-type(14){
/*內容分布在側軸中心位置*/
align-items: center;
}
.item:nth-of-type(15){
/*內容分布與文本的基準線對齊*/
align-items: baseline;
}
.item:nth-of-type(16){
/*內容拉伸填充*/
align-items: stretch;
}
.item:nth-of-type(16) .content{
height: auto;
}

.item:nth-of-type(17){
flex-wrap: wrap;
}
.item:nth-of-type(18){
flex-wrap: nowrap;
}


/*換行後控制多行元素在側軸方向的布局*/
.item:nth-of-type(19){
/*側軸方向上所有的元素貼靠到側軸的起始方向*/
flex-wrap: wrap;
align-content: flex-start;
}
.item:nth-of-type(20){
/*側軸方向上所有的元素貼靠到側軸的末尾方向*/
flex-wrap: wrap;
align-content: flex-end;
}
.item:nth-of-type(21){
/*伸縮容器與盒子有外邊距*/
flex-wrap: wrap;
align-content: center;
}
.item:nth-of-type(22){
/*伸縮容器與盒子無外邊距*/
flex-wrap: wrap;
align-content: space-around;
}
.item:nth-of-type(23){
/*伸縮容器與盒子無外邊距*/
flex-wrap: wrap;
align-content: space-between;
}
.item:nth-of-type(24) .content{
height:auto;
}
.item:nth-of-type(24){
/*根據內容所占的行數進行拉伸,默認情況下每一行高度相同*/
flex-wrap: wrap;
align-content: stretch;
}


</style>
</head>
<body>

<div class="container">

<header>
<h2>伸縮布局</h2>
</header>
<section class="item">
<h3>三個盒子水平等分</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>

<header>
<h2>伸縮布局的主軸</h2>
</header>
<section class="item">
<h3>主軸方向(從左到右)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3>flex-direction: column;(從上到下布局貼靠上邊)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3>flex-direction: row-reverse;(從右到左布局貼靠右邊)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3>flex-direction: column-reverse;(從下到上布局貼靠下邊)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>

<header>
<h2>主軸方向的內容布局方式(單行從左到右)</h2>
</header>
<section class="item">
<h3> justify-content: flex-start;(布局貼靠左邊) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> justify-content: flex-end;(布局貼靠右邊) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> flex-direction: row-reverse;(從右到左布局貼靠右邊) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> justify-content: center;(布局在中間) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> justify-content: space-around;(等距分開與父容器有一半邊距)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item">
<h3> justify-content: space-between;(等距分開與父容器無邊距)</h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>

<header>
<h2>側軸方向的內容布局方式(單行從左到右)</h2>
</header>
<section class="item h500">
<h3> align-items: flex-start;(布局貼靠上邊) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item h500">
<h3> align-items: flex-end;(布局貼靠下邊) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item h500">
<h3> align-items: center;(布局在垂直中間) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>
<section class="item h500">
<h3> align-items: baseline;(布局與文字基準線對齊) </h3>
<div class="content">1</div>
<div class="content" style="line-height: 200px;">2</div>
<div class="content">3</div>
</section>
<section class="item h500">
<h3> align-items: stretch;(布局高度拉伸填充) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</section>

<header>
<h2>控制主軸元素換行</h2>
</header>
<section class="item h500">
<h3> flex-wrap: wrap;(換行) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> flex-wrap: nowrap;(不換行) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>

<header>
<h2>換行後側軸方向的布局(換行情況下,多行從左到右,從上到下)</h2>
</header>
<section class="item h500">
<h3> align-content: flex-start;(布局緊靠上邊) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: flex-end;(布局緊靠下邊) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: center;(布局垂直中間) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: space-around;(每行布局等距分開與父容器有一般邊距) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: space-between;(每行布局等距分開與父容器無邊距) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
<section class="item h500">
<h3> align-content: stretch;(每行拉升相同高度填滿父容器) </h3>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
<div class="content">11</div>
<div class="content">12</div>
<div class="content">13</div>
</section>
</div>
</body>
</html>

原地址：http://www.qdfuns.com/notes/45493/f49dddfc2716beb3d79b9a5e58bf0096.html

CSS3布局之flex布局效果

相關推薦

CSS3布局之flex布局效果

方向 fff lang 距離 absolut 換行 row pla containe <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title

CSS布局之Flex布局

之間 垂直 baseline 兩個 -i nowrap 是否 flow 簡寫形式 Flex布局，可以簡便、完整、響應式地實現各種頁面布局。 瀏覽器支持：得到所有瀏覽器的支持。（註：Flex布局將成為未來布局的首選方案） 一. Flex布局的概念 Fle

微信小程序之Flex布局

設置 兩端對齊 開始 cal spl 不同的 reverse str 一個 微信小程序頁面布局方式采用的是Flex布局。Flex布局，是W3c在2009年提出的一種新的方案，可以簡便，完整，響應式的實現各種頁面布局。Flex布局提供了元素在容器中的對齊，方向以及順序，甚至他

css之flex布局 （靈活盒子）

itl lee header pbo 靈活 翻譯 ref .html lex 這裏純當自己的筆記，相看解釋的還是去鏈接吧 打開了新世界的大門 標記一下： 中文，阮一峰的博客，語法：http://www.ruanyifeng.com/blog/2015/07/flex-gra

布局方式-flex布局

contain none 寬度 one 指定 body flexbox ont src 1、彈性盒子 2、盒子本來就是並列的 3、指定寬度即可 <style> 　　.container { 　　　　width: 800px; 　　　　h

Android布局之相對布局RelativeLayout(一) ----簡單模仿ios端原生計算器主界面UI

ive 問題 line 原生 計算 模仿 ati 線性布局 you Android布局之相對布局RelativeLayout(一) ----簡單模仿ios端原生計算器主界面UI ??上一節學習了線性布局(LinearLayout)，很多時候做界面並不能只用LinearLay

【css3網頁布局】flex盒子模型

剩余空間 新的 4.2 默認 前綴 ron 實現 4.3 邊框 1.0 前言 網頁布局（layout）是CSS的一個重點應用。 經典布局類型： 布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊

微信小程序初學之頁面布局flex

log img item ima class XML style direction round wxml： <view class="section"> <view class="section__title">flex-direction: r

CSS3 Flex布局（項目）

target 縮小 如果 height follow item 不足 是否 項目 一、order屬性 order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。 二、flex-grow屬性 flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間

淺談CSS3中display屬性的Flex布局

center mil 界面 content ear contain star ever 之前 最近在學習微信小程序，在設計首頁布局的時候，新認識了一種布局方式display:flex 1 .container { 2 display: flex; 3 flex-

flex布局入門

.html 入門 htm targe http ram any examples lan flax語法知識參考： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局實戰篇參考：http://www.

Flex布局新寫法兼容寫法詳解

縮放 教程 性問題 前綴 article ade 有用 webkit web 很久之前用過flex，但是沒有考慮過兼容性問題，為了兼容ios一定要加上-webkit前綴： ul{ display: flex; /* 新版本語法: Opera

轉：阮一峰Flex 布局教程：實例篇

side web figure title borde 無法 ref .com 1.2 作者： 阮一峰 日期： 2015年7月14日 上一篇文章介紹了Flex布局的語法，今天介紹常見布局的Flex寫法。 你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。 我只列

彈性盒布局display:flex詳解

無效 bsp 快捷 表示 彈性盒子 sta 相等 網頁 direct 一：彈性盒子 隨著響應式設計的流行，網站開發者在設計網頁布局時往往要考慮到頁面在適配不同分辨率的瀏覽器時其內部組件位置大小都會產生變化，因此需要設計者根據窗口尺寸來調整布局，從而改變組件的尺寸和位置，以達

【iOS】UICollectionView自己定義Layout之蜂窩布局

with top http reserve src 布局 step object .com 網上的UICollectionView的Layout布局，其cell的形狀多為矩形和圓形。 本篇博文將正六邊形作為cell的基本形狀，為您展現獨特的蜂窩布局效果及實現源代碼。 幫

Android UI布局之TableLayout

you column true xmlns art parent 名稱 str demo 從字面上了解TableLayout是一種表格式的布局。這樣的布局會把包括的元素以行和列的形式進行排列。表格的列數為每一行的最大列數。當然表格裏邊的單元格是能夠為空的。 實例：La

flex 布局教程

彈性 baseline tar ria https 活性 pac -c title 網頁布局（layout）是 CSS 的一個重點應用。 布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方

css margin負邊距之列布局（列表、聖杯、雙飛翼）

door ont oct class containe resp 固定寬度 單元 自適應 技術服務於應用，技術來源於應用。 應用1：當接到設計師給的設計圖時（如下圖），發現每列左右和上下文保持一致，頓時整個心情就不好了。因為要兼顧響應式，即沒辦法保證每個列表單元的具體位置，

HTML/CSS：display:flex 布局教程

完全 安全 縮小 默認值 start column space https flex 網頁布局（layout）是 CSS 的一個重點應用。 布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊布局非常不

Flex布局結合border:left/right; 來設置文字中間分割線

設置高度 com none eight 垂直 有著 log 技術分享 border 今天設計給的稿件的分割線不是平常常見的那種，還給了兩條垂直的線。 比如像這樣： 看到這張圖，第一反應用兩條hr，再設置hr的border-left/right。然而這並不能實現這樣的效果。