flex属性入坑指南
flex布局
什么是flex布局?
网站中使用flex布局的元素,叫做flex容器,容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end,如下图:
flex有哪些属性呢?
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
如何实现1:2:3布局?
<div class="container">
<div class="item-1 border" />
<div class="item-2 border" />
<div class="item-3 border" />
</div>
<style>
.container { display: flex; max-width: 300px }
.border { border: 1px solid #ccc; height: 50px; }
.item-1 { flex: 1; }
.item-2 { flex: 2; }
.item-3 { flex: 3; }
</style>
flex-direction属性
- row(默认值):主轴为水平方向,起点在左端(项目从左往右排列)。
- row-reverse:主轴为水平方向,起点在右端(项目从右往左排列)。
- column:主轴为垂直方向,起点在上沿(项目从上往下排列)。
- column-reverse:主轴为垂直方向,起点在下沿(项目从下往上排列)。
- row
.container { flex-direction: row; }
- row-reverse
.container { flex-direction: row-reverse; }
- column
.container { dflex-direction: column; }
- column-reverse
.container { flex-direction: column-reverse; }
flex-wrap的属性
- nowrap(默认):不换行(列)。
- wrap:主轴为横向时:从上到下换行。主轴为纵向时:从左到右换列。
- wrap-reverse:主轴为横向时:从下到上换行。主轴为纵向时:从右到左换列。
- nowarp
.container { width: 200px; flex-wrap: nowrap; flex-direction: row; }
- warp && row
.container { flex-wrap: wrap; flex-direction: row; }
- warp-reverse && row
.container { flex-wrap: warp-reverse; flex-direction: row; }
- warp && column
.container { flex-wrap: warp; flex-direction: column; }
- wrap-reverse && column
.container { flex-wrap: wrap-reverse; flex-direction: column; }
- warp && row-reverse
.container { flex-wrap: wrap; flex-direction: row-reverse; }
- warp-reverse && row-reverse
.container { flex-wrap: wrap-reverse; flex-direction: row-reverse; }
- warp && column-reverse
.container { flex-wrap: wrap; flex-direction: column-reverse; }
- warp-reverse && column-reverse
.container { flex-wrap: wrap-reverse; flex-direction: column-reverse; }
flex-flow
justify-content
- flex-start(默认):与主轴的起点对齐。
- flex-end:与主轴的终点对齐。
- center:与主轴的中点对齐。
- space-between:两端对齐主轴的起点与终点。
- space-around:每个项目两侧的间隔相等。
- flex-start
.container { justify-content: flex-start; }
- flex-end
.container { justify-content: flex-end; }
- center
.container { justify-content: center; }
- space-between
.container { justify-content: space-between; }
- space-around
.container { justify-content: space-around; }
align-items
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,项目将占满整个容器的高度。
- flex-start
.container { display: flex; align-items: flex-start; }
- flex-end
.container { display: flex; align-items: flex-end; }
- center
.container { display: flex; align-items: center; }
- baseline
.container { display: flex; align-items: baseline; }
.container { display: flex; height: 200px; align-items: baseline; }
.item1 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 8px; }
.item2 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 16px; }
.item3 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 24px; }
.item4 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 32px; }
.item5 { width: 50px; height: 80px; border: 1px solid #ccc; padding-top: 40px; }
- stretch
.container { display: flex; height: 200px; }
.item { width: 50px; border: 1px solid #ccc; }
order(排列顺序)
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
<style>
.container { display: flex; height: 200px; }
.item1 { width: 50px; height: 50px; border: 1px solid #ccc; order: 1; }
.item2 { width: 100px; height: 50px; border: 1px solid #ccc; order: 3; }
.item3 { width: 50px; height: 50px; border: 1px solid #ccc; order: 2; }
</style>
flex-grow(放大比例,默认为0,即如果存在剩余空间,也不放大。)
<div class="container">
<div class="item1 border">1</div>
<div class="item2 border">2</div>
<div class="item3 border">3</div>
</div>
<style>
.border { border: 1px solid #ccc; }
.container { display: flex; height: 200px; }
.item1 { width: 50px; height: 50px; order: 1; }
.item2 { width: 100px; height: 50px; order: 3; flex-grow: .5 }
.item3 { width: 50px; height: 50px; order: 2; }
</style>
没有加属性之前:
加了以后:
flex-shrink(缩小比例,默认为1,即如果空间不足,该项目将缩小。)
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
<style>
.container { display: flex; height: 100px; width: 400px; }
.item1 { width: 100px; height: 50px; border: 1px solid #ccc; flex-shrink: 0; }
.item2 { width: 300px; height: 50px; border: 1px solid #ccc; flex-shrink: 1; }
.item3 { width: 100px; height: 50px; border: 1px solid #ccc; flex-shrink: 0; }
</style>
没有加属性前:
加了以后:
转载自:https://juejin.cn/post/7236989169770758205