css彈性盒模型怎么實(shí)現(xiàn)
這篇文章主要介紹“css彈性盒模型怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在css彈性盒模型怎么實(shí)現(xiàn)問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css彈性盒模型怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
10多年的鄧州網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整鄧州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“鄧州網(wǎng)站設(shè)計(jì)”,“鄧州網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
css之彈性盒模型
彈性盒子（Flexible Box/filebox）是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。引入彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
彈性盒子由彈性容器（父元素）和彈性子元素（可以一個(gè)或者多個(gè)）組合而成。彈性容器通過設(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屬性，如果沒有父容器則為“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)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
本文標(biāo)題：css彈性盒模型怎么實(shí)現(xiàn)
標(biāo)題路徑：http://m.rwnh.cn/article36/gddcsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、企業(yè)建站、網(wǎng)站制作、商城網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、虛擬主機(jī)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 微網(wǎng)站建設(shè)要如何選擇建站公司 2016-09-15
- 什么樣的建站公司值得企業(yè)托付？ 2016-11-26
- 上海網(wǎng)站建設(shè)公司—客戶滿意的建站公司 2020-11-09
- 龍華網(wǎng)站建設(shè)定制找哪家建站公司比較好? 2022-08-19
- 企業(yè)做網(wǎng)站怎么選擇專業(yè)的建站公司 2022-12-08
- 面對(duì)客戶提出的一些不合理的要求 專業(yè)的建站公司會(huì)這樣去做 2022-05-22
- 建站公司如何更好地為客戶建設(shè)營(yíng)銷型網(wǎng)站 2021-09-28
- 手機(jī)網(wǎng)站建設(shè)怎么選一個(gè)好的建站公司 2022-05-19
- 網(wǎng)站建設(shè)是找第三方建站公司還是自己建站 2021-04-27
- 除了網(wǎng)站設(shè)計(jì)，建站公司還能提供哪些服務(wù)？ 2022-07-22
- 在選擇建站公司做網(wǎng)站如何選擇模板還是定制開 2021-08-15
- 網(wǎng)站建設(shè)是找第三方建站公司還是自己建站 2022-11-29