這篇文章主要介紹“css彈性盒模型怎么實現”，在日常操作中，相信很多人在css彈性盒模型怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css彈性盒模型怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
css之彈性盒模型
彈性盒子（Flexible Box/filebox）是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子由彈性容器（父元素）和彈性子元素（可以一個或者多個）組合而成。彈性容器通過設置display屬性的值為flex或者是inline-flex將其定義為彈性容器。
一、display:flex
作用：讓當前元素形成盒，控制子元素。
特點：彈性盒里的子元素，都是沿著主軸排列，默認情況下，主軸為X軸。彈性盒里的子元素都能直接添加寬高（不用在乎是塊元素還是行內元素）。讓彈性盒里的一個子元素左右上下居中，直接給子元素添加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 主軸對齊方式
屬性值：
flex-start 默認，頂端對齊
flex-end 末端對齊
center 居中對齊
space-between 兩端對齊，中間自動分配
space-around 自動分配距離
3、align-items 側軸對齊方式
屬性值：
flex-start 默認，頂端對齊
flex-end 末端對齊
center 居中對齊
baseline和flex-start等效
4、flex-wrap 換行
屬性值：
wrap 換行
nowrap 不換行
wrap-reverse 反向換行
5、allign-content 行與行之間對齊方式
屬性值：
flex-start 默認，頂端對齊
flex-end 末端對齊
center 居中對齊
space-between 兩端對齊，中間自動分配
space-around 自動分配距離
6、align-self 控制一個子元素（靈活元素）在側軸的對齊方式
屬性值：
auto 默認值。元素繼承了它的父容器的align-items屬性，如果沒有父容器則為“stretch”
stretch 元素被拉伸以適應容器
content 元素位于容器的中心
flex-start 元素位于容器的開頭
flex-end 元素位于容器的結尾
7、order 排序（控制子元素的先后順序，數值越大越向后排?？梢詾樨摚?/p>
8、flex:1 把剩余空間全部分配給當前元素（當然指的是分配主軸上的空間）
flex是一個復合屬性,設置或者是檢索彈性盒模型對象的子元素如何分配空間
新版盒模型
flex三個屬性介紹：flex-grow:一個數字，規定項目相對于其它靈活的項目進行擴展的量
flex-shrink:一個數字，規定項目將相對于其它靈活項目進行收縮的量
flex-basis:項目長度
<!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>到此，關于“css彈性盒模型怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
