時間(jiān)：2022-12-28 浏覽量： 收藏
flex-direction：設置主軸的方向
justify-content：設置主軸上的子元素排列方式
flex-wrap：設置子元素是(shì)否換行(xíng)
align-content：設置側軸上的子元素排列方式（多(duō)行(xíng)）
align-items：設置側宙上的子元素排列方式（單行(xíng)）
flex-flow： 複核屬性，相(xiàng)當于同時設置了flex-direction和flex-wrap
flex-direction屬性決定主軸的方向（即項目的排列方向）
注意：主軸和側軸是(shì)會(huì)變化(huà)的，就(jiù)看flex-direction設置誰爲主軸，剩下的就(jiù)是(shì)側軸。而我們的 子元素都是(shì)跟着主軸來(lái)排列的
屬性值說明
row：默認從(cóng)左到右
row-reverse：從(cóng)右到左
column：從(cóng)上到下
column：從(cóng)下到上
簡體(tǐ)中文
繁體中文
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 800px;
height: 300px;
background-color: pink;
display: flex ;
/* 默認的按照(zhào)行(xíng)排列的，元素是(shì)按照(zhào)主軸排列的 */
/* flex-direction: row; */
/* flex-direction: row-reverse; */
flex-direction: column;
}
div span{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>justify-content屬性定義了項目在主軸上的對齊方式
注意：使用這(zhè)個屬性之前一定要(yào)确定好主軸是(shì)那個
屬性值說明
flex-start：默認值從(cóng)頭部開(kāi)始，如果主軸是(shì)x軸，則從(cóng)左到右
flex-end：從(cóng)尾部開(kāi)始排列
center：在主軸居中對齊（如果主軸是(shì)x軸則水(shuǐ)平居中）
space-around：平分(fēn)剩餘空間(jiān)
space-between：先兩邊貼邊 再平分(fēn)剩餘空間(jiān)（重要(yào)）
<style>
div{
width: 800px;
height: 300px;
background-color: pink;
display: flex ;
/* 默認沿着主軸從(cóng)左到右排列 */
justify-content: flex-start;
/* 如果主軸是(shì)x，則從(cóng)右到左排列 */
justify-content: flex-end;
/* 居中排列 */
justify-content: center;
/* 平分(fēn)剩餘空間(jiān) */
justify-content: space-around;
/* 先兩邊貼邊再平分(fēn)剩餘空間(jiān) */
justify-content: space-between;
}
div span{
width: 200px;
height: 200px;
background-color: green;
}
</style>flex默認讓子元素在一行(xíng)顯示，項目都排在一條線上（又稱“軸線”）,如果裝不(bù)開(kāi)會(huì)縮小(xiǎo)子元素的寬度。
屬性值說明
nowrap：默認值，不(bù)換行(xíng)
wrap：換行(xíng)
設置flex-wrap:wrap之後
該屬性是(shì)控制(zhì)子項在側軸（默認是(shì)y軸）上的排列方式，在子項爲單項的時候使用
屬性值說明
flex-start：默認值 從(cóng)上到下
flex-end：從(cóng)下到上
center：擠在一起居中（垂直居中）
streth：拉伸
從(cóng)下到上
垂直居中
去掉height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 800px;
height: 400px;
background-color: pink;
display: flex ;
justify-content: center;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
}
div span{
width: 150px;
height: 100px;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>設置子項在側軸上的排列方式并且隻能用于子項出現(xiàn)換行(xíng)的情況（多(duō)行(xíng)），單行(xíng)的情況下是(shì)無效的
屬性值說明
flex-start：默認值在側軸的頭部開(kāi)始排列
flex-end：在側軸的尾部開(kāi)始排列
center：在側軸中間(jiān)顯示
space-around：子項在側軸平分(fēn)剩餘空間(jiān)
space-between：子項在側軸先分(fēn)布在兩頭，再平分(fēn)剩餘空間(jiān)
stretch：設置子項元素高(gāo)度平分(fēn)父元素高(gāo)度
在側軸的尾部開(kāi)始排列
去掉子元素的hight
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 800px;
height: 400px;
background-color: pink;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: stretch;
}
div span{
width: 150px;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
</html>align-items 适用于單行(xíng)情況下，隻有上對齊、下對其、居中和拉伸
align-content 适用于換行(xíng)（多(duō)行(xíng)）的情況下（單行(xíng)情況下無效），可(kě)以設置上對齊、下對齊、居中、拉伸以及平均分(fēn)配剩餘空間(jiān)等屬性值
總結就(jiù)是(shì)單行(xíng)找align-items多(duō)行(xíng)找align-content
flex-flow屬性是(shì)flex-direction和flex-wrap的複核屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 800px;
height: 400px;
background-color: pink;
display: flex;
/* flex-direction: column; */
/* flex-wrap: wrap; */
flex-flow: column wrap;
}
div span{
width: 150px;
height: 100px;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</body>
</html>flex 子項目占的份數
align-self 控制(zhì)子項自(zì)己在側軸的排列方式
order 屬性定義子項的排列順序（前後順序）
flex屬性定義子項目分(fēn)配剩餘空間(jiān)，用flex來(lái)表示占多(duō)少份數。默認爲0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
section{
display: flex;
margin: 0 auto;
width: 800px;
height: 150px;
background-color: pink;
}
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: blue;
}
section div:nth-child(2){
width: 100px;
height: 150px;
flex: 1;
background-color: green;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
<style>
section{
display: flex;
margin: 0 auto;
width: 800px;
height: 150px;
background-color: pink;
}
section div:nth-child(1){
width: 100px;
height: 150px;
flex: 1;
background-color: red;
}
section div:nth-child(3){
width: 100px;
height: 150px;
flex: 1;
background-color: blue;
}
section div:nth-child(2){
width: 100px;
height: 150px;
flex: 1;
background-color: green;
}
</style>align-self屬性允許單個項目有與其他項目不(bù)一樣的對齊方式，可(kě)覆蓋align-items屬性。默認值爲auto，表示可(kě)以繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
section{
display: flex;
margin: 0 auto;
width: 800px;
height: 450px;
background-color: pink;
}
section div:nth-child(1){
width: 150px;
height: 150px;
background-color: red;
}
section div:nth-child(3){
width: 150px;
height: 150px;
align-self: flex-end;
background-color: blue;
}
section div:nth-child(2){
width: 150px;
height: 150px;
background-color: green;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>數值越小(xiǎo)，排列越靠前，默認爲0
注意：和z-index不(bù)一樣
section div:nth-child(1){
width: 150px;
height: 150px;
background-color: red;
}
section div:nth-child(3){
width: 150px;
height: 150px;
order: -1;
background-color: blue;
}
section div:nth-child(2){
width: 150px;
height: 150px;
background-color: green;
}
RELATED RECOMMEND
2022-12-28
一、 彈性布局 在平時的我們常用的布局類型有以下幾種： 1.浮動+定位 2.自(zì)适應（百分(fēn)比） 3.響應式布局 4.彈性布局（Flex布局） 以下內(nèi)容是(shì)比較常用的彈性布局，但(dàn)塊标簽與行(xíng)內(nèi)塊标簽是(shì)有區别的。 優點：兼容性支持所有浏覽器(Webkit內(nèi)核的浏覽器,要(yào)加上-webkit-)，可(kě)以随用戶的喜好進行(xíng)調節，可(kě)以将任何一個容器指定爲Flex布局。 缺點：因爲彈性布局可(kě)調節，所以有巨
2022-12-28
外(wài)貿電(diàn)商領域 Twitter 已成爲一種極具潛力的推廣工(gōng)具，能夠爲外(wài)貿網站(zhàn)快(kuài)速導入大(dà)量流量，是(shì)外(wài)貿電(diàn)商發展的時代趨勢。一、将 Twitter 和外(wài)貿網站(zhàn)關聯起來(lái)（一）添加 Twitter 分(fēn)享按鈕在網站(zhàn)添加 Twitter 分(fēn)享按鈕意義重大(dà)。這(zhè)不(bù)僅方便客戶将網站(zhàn)産品、內(nèi)容分(fēn)享到他們自(zì)己的 Twitter，更關鍵的是(shì)，每當網站(zhàn)更新産品或文章時，我們自(zì)己要(yào)把更新內(nèi)容分(fēn)享到自(zì)己的 Twitter 上。如
2022-12-28
在當今的網絡世界中，富媒體(tǐ)對于大(dà)家(jiā)來(lái)說早已不(bù)是(shì)什麽新鮮事物(wù)，特别是(shì)谷歌(gē)廣告中頻繁出現(xiàn)的富媒體(tǐ)展示形式，那真是(shì)令人(rén)眼花缭亂。然而，你可(kě)能不(bù)知道(dào)的是(shì)，在自(zì)然排名結果裡(lǐ)同樣蘊含着豐富多(duō)樣的富媒體(tǐ)內(nèi)容。這(zhè)些富媒體(tǐ)元素就(jiù)像是(shì)一把神奇的鑰匙，即使我們的網站(zhàn)在搜索結果中處于較低(dī)排名（比如首頁非前三的位置），也能憑借它們開(kāi)啓獲取更多(duō)用戶互動的大(dà)門，讓原本激烈的關鍵詞排名競争變得不(bù)再那麽殘酷。那麽，作爲 SEO 從(cóng)
Copyright © 2012-2024 世敏網絡 版權所有 京ICP證000000号 
閩公網安備 35020502000640号
關鍵詞聚合
