语法: display:flex;
1、给父盒子添加属性,对父盒子进行描述,仅子盒子生效;
2、这个时候的盒子就是弹性盒子,有主轴和侧轴()
3、有自己独立的布局方式
一、使用方法
给父盒子添加:display:flex;
(必须写)
对父盒子进行布局描述即可:比如flex-wrap:wrap;
,justify-content:space-around;
二、flex 布局常用属性
1.主轴方向: flex-direction
属性
取值(常用):
row
: 从左到右 (默认)【横向】
column
: 从上到下 【纵向】
2. 开启换行: flex-wrap
属性
取值(常用):
wrap
: 换行
nowarp
: 不换行(所有子元素都是在一行,且总宽度小于父元素,大于的话会被强行缩小)
3.主轴对齐方式: justify-content
属性
取值(常用):
flex-start
: 起始位置对齐
flex-end
: 结束位置对齐
center
: 居中
space-between
:第一个贴左边,最后一个贴右边,其他盒子均分,保证每个盒子之间的空隙是相等的
space-around
: 元素会平均地分布
4.侧轴的对齐方式: align-items
和 align-content
属性
(1)align-items 取值(常用):
flex-start
flex-end
center
stretch
: 元素的高度会被拉伸到最大(不能给死高度)
【使用场景】:等分布局
(2)align-content 取值(常用):
flex-start
flex-end
center
space-between
space-around
【使用场景】:固定高,多行;固定高,开启换行
三、align-items
和 align-content
区别(面试常问)
align-items:
1、属性作用的基本单位是每一个子项
,在所有情况下都有效果(不管是否换行)
2、 子项默认均分区间大小,在均分区间内对其方式默认为 flex-start
align-content:
属性作用的基本单位是子项构成的行
,flex容器在高度固定的情况下:
①子项多行时生效。②设置了 flex-wrap:wrap 时生效。
四、效果图
【完整例子】
<div class="all">
<div class="i1">1</div>
<div class="i2">2</div>
<div class="i3">3</div>
<div class="i4">4</div>
</div>
/* 不切换主轴-------------------------------------------- */
.all {
width: 200px;
height: 200px;
border:1px solid salmon;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.all>div {
height: 70px;
width: 70px;
}
效果:
换行与不换行的比较
space-between 效果
space-around 效果
flex-start 效果
flex-end 效果
补充:flex 布局,给子盒子添加的属性
前提:父盒子要加 display:flex
子盒子添加:
flex :1 ;
属性值取值为数字,代表盒子宽的占比,分配主轴的空间
order: 999;
设置盒子的排序,值越小,越靠前,默认 0
align-self:center;
用于设置在侧轴的位置,但是align-self给子元素设置,比align-items的优先级高。取值与align-items的取值一样。
【示例】
<div class="all">
<div class="i1">1</div>
<div class="i2">2</div>
<div class="i3">3</div>
<div class="i4">4</div>
</div>
/* 不切换主轴-------------------------------------------- */
.all {
width: 200px;
height: 200px;
border:1px solid salmon;
display: flex;
}
.all>div {
height: 70px;
width: 70px;
flex: 1;
}
/* 单独设置第四个盒子的占比 */
.all .i4 {
background-color: #B1CCFF;
flex: 2;
}
效果如下: