溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css彈性盒模型怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在css彈性盒模型怎么實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css彈性盒模型怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
css之彈性盒模型
彈性盒子（Flexible Box/filebox）是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
彈性盒子由彈性容器（父元素）和彈性子元素（可以一個(gè)或者多個(gè)）組合而成。彈性容器通過(guò)設(shè)置display屬性的值為flex或者是inline-flex將其定義為彈性容器。
一、display:flex
作用：讓當(dāng)前元素形成盒，控制子元素。
特點(diǎn)：彈性盒里的子元素，都是沿著主軸排列，默認(rèn)情況下，主軸為X軸。彈性盒里的子元素都能直接添加寬高（不用在乎是塊元素還是行內(nèi)元素）。讓彈性盒里的一個(gè)子元素左右上下居中，直接給子元素添加margin:auto ;就可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section{
display: flex;
}
span{
width: 100px;
height: 100px;
background-color: green;
margin: auto;
}
</style>
</head>
<body>
<section>
<span></span>
</section>
</body>
</html>二、具有以下屬性：
1、flex-direction 改變主軸的排列方向
屬性值：
row X為主軸
column Y為主軸
row-reverse 在主軸反向排列
2、justify-content 主軸對(duì)齊方式
屬性值：
flex-start 默認(rèn)，頂端對(duì)齊
flex-end 末端對(duì)齊
center 居中對(duì)齊
space-between 兩端對(duì)齊，中間自動(dòng)分配
space-around 自動(dòng)分配距離
3、align-items 側(cè)軸對(duì)齊方式
屬性值：
flex-start 默認(rèn)，頂端對(duì)齊
flex-end 末端對(duì)齊
center 居中對(duì)齊
baseline和flex-start等效
4、flex-wrap 換行
屬性值：
wrap 換行
nowrap 不換行
wrap-reverse 反向換行
5、allign-content 行與行之間對(duì)齊方式
屬性值：
flex-start 默認(rèn)，頂端對(duì)齊
flex-end 末端對(duì)齊
center 居中對(duì)齊
space-between 兩端對(duì)齊，中間自動(dòng)分配
space-around 自動(dòng)分配距離
6、align-self 控制一個(gè)子元素（靈活元素）在側(cè)軸的對(duì)齊方式
屬性值：
auto 默認(rèn)值。元素繼承了它的父容器的align-items屬性，如果沒(méi)有父容器則為“stretch”
stretch 元素被拉伸以適應(yīng)容器
content 元素位于容器的中心
flex-start 元素位于容器的開頭
flex-end 元素位于容器的結(jié)尾
7、order 排序（控制子元素的先后順序，數(shù)值越大越向后排。可以為負(fù)）
8、flex:1 把剩余空間全部分配給當(dāng)前元素（當(dāng)然指的是分配主軸上的空間）
flex是一個(gè)復(fù)合屬性,設(shè)置或者是檢索彈性盒模型對(duì)象的子元素如何分配空間
新版盒模型
flex三個(gè)屬性介紹：flex-grow:一個(gè)數(shù)字，規(guī)定項(xiàng)目相對(duì)于其它靈活的項(xiàng)目進(jìn)行擴(kuò)展的量
flex-shrink:一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其它靈活項(xiàng)目進(jìn)行收縮的量
flex-basis:項(xiàng)目長(zhǎng)度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing: border-box;
}
#section1{
width: 600px;
height: 500px;
background-color: aliceblue;
margin: auto;
display: flex;
flex-direction: column;
/* flex-direction: row-reverse; */
flex-direction: row; /*屬性1*/
justify-content: center;
justify-content: space-around; /*屬性2*/
align-items: baseline;
align-items: flex-start;
align-items: center; /*屬性3*/
flex-wrap: wrap; /*屬性4*/
align-content: flex-end;
align-content: center; /*屬性5*/
}
span{
width: 100px;
height:100px;
background: orange;
border-radius: 50%;
font-size: 20px;
color:white;
text-align: center;
}
#section2{
width: 600px;
height: 400px;
background-color: aliceblue;
margin: 0 auto;
display: flex;
align-items: center;
}
div{
width: 100px;
height: 100px;
background-color: antiquewhite;
font-size: 20px;
color:white;
text-align: center;
}
div:nth-child(1){
background-color: red;
order: 3; /* 屬性7 */
flex:1; /* 屬性8 */
}
div:nth-child(2){
background-color: blue;
/* align-self: flex-end; 屬性6 */
flex:1;
border:10px solid green;
}
div:nth-child(3){
flex:1;
}
</style>
</head>
<body>
<section id="section1">
<span>1</span>
<span>2</span>
<span>3</span>
<span >4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</section>
<br>
<section id="section2">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</section>
</body>
</html>案例1：骰子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
div {
width: 100px;
height: 100px;
background-color: #e7e7e7;
padding: 4;
border-radius: 10px;
box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
}
span {
display: block;
width: 24px;
height: 24px;
background-color: black;
border-radius: 12px;
margin: 4px;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
div:nth-child(1) {
display: flex;
justify-content: center;
align-items: center;
}
div:nth-child(2) {
display: flex;
justify-content: space-between;
}
div:nth-child(2) span:nth-child(2) {
align-self: flex-end;
}
div:nth-child(3) {
display: flex;
flex-direction: column;
}
div:nth-child(3) span:nth-child(2) {
align-self: center;
}
div:nth-child(3) span:nth-child(3) {
align-self: flex-end;
}
div:nth-child(4) {
display: flex;
justify-content: space-between;
}
div:nth-child(4) p {
display: flex;
flex-direction: column;
justify-content: space-between;
}
div:nth-child(5) {
display: flex;
justify-content: space-between;
}
div:nth-child(5) p {
display: flex;
flex-direction: column;
justify-content: space-between;
}
div:nth-child(5) p:nth-child(2) {
align-self: center;
}
div:nth-child(6) {
display: flex;
justify-content: space-between;
}
div:nth-child(6) p {
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<p>
<span></span><span></span>
</p>
<p>
<span></span><span></span>
</p>
</div>
<div>
<p>
<span></span><span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span><span></span>
</p>
</div>
<div>
<p>
<span></span><span></span><span></span>
</p>
<p>
<span></span><span></span><span></span>
</p>
</div>
</body>
</html>到此，關(guān)于“css彈性盒模型怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼