先来看一张图:
基本概念
1, 主轴默认为x轴,侧轴默认为y轴。flex布局就是围绕这个轴来进行的
2, flex container就是布局的父元素,flex item就是子元素
flex container的属性一共有:
1,主轴方向flex-direction: row/row-reverse/column/column-reverse
来看一个例子:
<style>
.parent {
display: flex;
border: 1px solid red;
width: 500px;
}
.child {
border: 1px solid black;
width: 100px;
height: 50px;
margin: 10px;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
可以看到给父元素设置display后,三个子元素就排在一行了,因为flex-direction默认为row,就是排在一行
再看看一个flex-direction:row-reverse的例子:
.parent {
display: flex;
border: 1px solid red;
width: 500px;
flex-direction: row-reverse;
}
.child {
border: 1px solid black;
width: 100px;
height: 50px;
margin: 10px;
}
可以看到,子元素的排列顺序反了过来
flex-direction:column就是排在一列,这里就不做演示了
2,flex-wrap(换行):nowrap/wrap/wrap-reverse
看个例子:
.parent {
display: flex;
border: 1px solid red;
width: 500px;
flex-direction: row-reverse;
}
.child {
border: 1px solid black;
width: 100px;
height: 50px;
margin: 10px;
}
可以看到父元素的宽度为500,本来容不下六个子元素,但因为flex-wrap默认为nowrap。
来看加上flex-wrap:wrap的效果:
显而易见,一行容不下6个子元素,他们自动进行了换行
3,justify-content(主轴内容)
.parent {
display: flex;
border: 1px solid red;
width: 500px;
height: 60px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between
}
.child {
border: 1px solid black;
width: 100px;
height: 50px;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
使用justify-content:space-between(空隙在中间)
来看效果图:
可以看到,多余的空间都在元素的中间
使用justify-content:space-around(空隙在周围)
来看效果图:
使用justify-content:flex-start (和主轴第一个元素对齐)
使用justify-content:center(居中)
4,align-items(侧轴内容如何排列,)
使用align-items: stretch(默认值,意思是伸展,拉伸);
.parent {
display: flex;
border: 1px solid red;
width: 500px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: stretch;
}
.child {
border: 1px solid black;
width: 100px;
}
</style>
<div class="parent">
<div class="child">1 <br> 1<br>1 <br>1 <br>1 </div>
<div class="child">2 <br> 2 <br> 2 </div>
<div class="child">3</div>
</div>
可以看到子元素2 和子3元素的内容是不足以撑开容器的高度,但是align-items: stretch吧他们的容器高度进行了拉伸,和最高的元素一样高
使用align-items: flex-start(意思是所有的元素往侧轴的起点靠);
看效果:
使用align-items: center(往侧轴的中间放):
align-content和justify-content的属性一样,只不过前者是侧轴,后者是主轴,这里就不介绍啦。
下面来看flex item的属性:
1,flex-grow(当空间多余时,这个属性决定孩子如何分配多余的空间)
先看一个不使用flex-grow的例子:
可以看到第三个孩子右边还有很多空间。
此时,在孩子1身上写:flex-grow:1,
.child:nth-child(1) {
flex-grow: 1
}
效果如下:
可以看到孩子1吧多余的空间占满了!!!!, 因为他吃的是独食
给孩子2加上flex-grow:1再看:
.child:nth-child(1) {
flex-grow: 1
}
.child:nth-child(2) {
flex-grow: 1
}
效果图:
可以看到孩子1和孩子2平分了剩下的空间。
如果在孩子3上加flex-grow:1 ,那么三个孩子平分这个多余的空间
如果孩子1写flex-grow:2, 孩子2写:fle-grow:1,那么孩子1就拿三分之二的空间,孩子2就拿三分之一的空间 是不是感觉恍然大悟呢?
2,flex-shrink(当空间不够时,这个属性决定孩子瘦了多少),这里就不展开讲了
3,flex-basis(默认为元素本身的大小,一般不用)
4,order(决定flex元素的顺序)
看一个例子:
.parent {
display: flex;
border: 1px solid red;
width: 500px;
}
.child {
border: 1px solid black;
margin: 2px;
height: 60px;
}
.child:nth-child(1) {
order: 2;
}
.child:nth-child(2) {
order: 3;
}
.child:nth-child(3) {
order: 1;
}
效果如图:
可以看到,通过改变order,来改变元素的位置。
algin-self(自己决定自己的位置)
看一个例子:
.parent {
display: flex;
border: 1px solid red;
width: 500px;
justify-content: space-around;
align-items: flex-start;
}
.child {
border: 1px solid black;
margin: 2px;
}
<div class="parent">
<div class="child">111 <br> 111 <br> 111 <br> 111 </div>
<div class="child">222 <br> 222 <br> 222 </div>
<div class="child">333</div>
</div>
现在孩子3是在最上面的,可是他就很皮,就不想在最上面,那怎么办呢?
就可以用align-self来调整孩子3的位置,比如:
.child:nth-child(3) {
align-self: center;
}
就有如下效果:
看到这里,你是不是对flex布局有的新的体会呢:)
完。