0
点赞
收藏
分享

微信扫一扫

html 弹性盒模型


父元素:(display: flex,flex-direction,justify-content, align-items,align-content)

html 弹性盒模型_css


要使用弹性盒模型需要设置display: flex;

设置了flex-direction的一个方向为主轴则另一个方向就为侧轴,这个需要分清

1、flex-direction

(1)flex-direction: row;默认从左到右

html 弹性盒模型_盒模型_02


(2)flex-direction: row-reverse;

html 弹性盒模型_堆栈_03


(3) flex-direction: column;垂直排列

(4)flex-direction: column-reverse;反向垂直排列

<style type="text/css">.box{
width:800px;
height:500px;
border:10px solid pink;
display: flex;
flex-direction: row;
}
.box .item{
width:80px;
height:80px;
background-color: yellow;
border:1px solid black;
}</style>

<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>


2、 justify-content主轴

(1) justify-content: flex-start;

html 弹性盒模型_盒模型_04


(2)justify-content: flex-end;

html 弹性盒模型_css_05


(3)justify-content: center;

html 弹性盒模型_css_06


3、 align-items侧轴

(1)align-items: center;

.box{
width:800px;
height:400px;
border:10px solid pink;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

html 弹性盒模型_盒模型_07


(2)align-items: flex-end;(3)align-items: flex-start;

4、flex-wrap:换行

flex:wrap;默认为wrap换行

flex:nowrap;

flex:wrap-reverse;

5、align-content堆栈伸缩行

align-content:flex-start;align-content:flex-end;align-content:center;

align-content: space-around;align-content: space-between;

子元素:(order,flex,align-self)

1、order

支持负数不支持小数

.box .item:nth-of-type(1){
order:3;
}
.box .item:nth-of-type(2){
order:3;
}

.box .item:nth-of-type(3){
order:0;
}

.box .item:nth-of-type(4){
order:2;
}

.box .item:nth-of-type(5){
order:1;
}

html 弹性盒模型_css_08


2、flex:伸缩性

.box .item:nth-of-type(1){
flex:1;
}
.box .item:nth-of-type(2){
flex:2;
}

.box .item:nth-of-type(3){
flex:3;
}

.box .item:nth-of-type(4){
flex:4;
}

.box .item:nth-of-type(5){
flex:5;
}

html 弹性盒模型_堆栈_09


3、align-self对子元素设置侧轴位置

.box .item:nth-of-type(1){
align-self: flex-start;
}
.box .item:nth-of-type(2){
align-self: center;
}

.box .item:nth-of-type(3){
align-self: flex-end;
}

.box .item:nth-of-type(4){
align-self: flex-start;
}

.box .item:nth-of-type(5){
align-self: center;
}

html 弹性盒模型_css_10


4、margin:auto;


举报

相关推荐

0 条评论