理解Flex布局方式

waterhydroxyl 发布于

Flex

都 9102 年了,还在用 table、用 float 写网页吗?Flexbox 是现今必备的技能,它是第一套专门用于网页布局的 CSS 方法,知名的 CSS Framework 如 Bootstrap 4、Foundation (最新版本甚至改用 Grid 了)、Tailwind 等等都已使用 Flexbox 为基础。

flex布局主要分类两个角色flex-container和flex-itmes

1
2
3
4
5
6
7
8
<div class="container">
<div class="box A">A</div>
<div class="box B">B</div>
<div class="box C ">C</div>
<div class="box D">D</div>
<div class="box E ">E</div>
<div class="box F">F</div>
</div>
1
2
3
4
5
6
7
8
9
.container {
display: flex;
}
.box {
width:60px;
height:60px;
line-height: 60px;
text-align: center;
}

image-20210628144122148

flex-container的设定

flex-direction

设置flex-items在容器里的排序方向(同时决定主轴),默认值为row。

  • flex-direction: column

image-20210628144540175

  • flex-direction: column-reverse;

image-20210628145438041

  • flex-direction: row-reverse;

image-20210628145548599

justify-content

定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。

  • justify-content: center;

  • justify-content: flex-start;

  • justify-content: flex-end;

  • justify-content: space-around;

image-20210628153653362

  • justify-content: space-between;

image-20210628153838217

  • justify-content: space-evenly;

image-20210628154336521

align-items

设置项目在其包含块中在交叉轴方向上的对齐方式。

  • stretch; 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。(一般会给item设置宽高,很少用)

  • flex-start; 元素向侧轴起点对齐。

  • flex-end; 元素向侧轴终点对齐。

  • center; 元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。

image-20210628155147221

flex-warp;

  • flex-warp: warp; 指定 flex 元素单行显示还是多行显示 。如果允许换行,这个属性允许你控制行的堆叠方向。

flex-direction可以和flex-warp组合写成flex-flow

align-conten

只在flex-warp: warp; 时生效

  • align-content: center; 将项目放置在中点

  • align-content: flex-start; 从起始点开始放置flex元素

image-20210628160837340

  • align-content: flex-end; 从终止点开始放置flex元素

image-20210628160755753

  • align-content: space-around;

image-20210628161005145

  • align-content: space-between;

image-20210628161103521

flex-items的设定

order

  • order: -1/0/1

默认值为0,排序为由小到大排列

1
2
3
4
.F {
background-color: #EEEC00;
order: -1;
}

image-20210628161504810

  • align-self

对齐当前 flex 行中的 flex 元素,并覆盖已有的align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto,则会忽略 align-self

1
2
3
4
5
6
7
8
.A {
background-color: #A8C0CE;
align-self: flex-end;
}
.B {
background-color: #B0B6BA;
align-self: flex-start;
}

image-20210628161649501

flex-basis

指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。

  • flex-basis: 0; 按照内容确定宽度大小

  • flex-basis: auto; 按照原来大小,即使初始的60px

  • flex-basis: 75px;

如图此时flex-direction为row时,将会覆盖items的宽度

image-20210628162354840

flex-grow

  • flex-grow: 1; 剩余空间等比分扩大

image-20210628162922797

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
width:60px;
height:60px;
line-height: 60px;
text-align: center;
flex-grow: 1;
}
.A {
background-color: #A8C0CE;
}
.B {
background-color: #B0B6BA;
flex-grow: 3;
}
  • B占剩余空间的3份及3/5

image-20210628163246748

flex- shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

同比flex-grow。

flex

规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性,用来设置 flex-grow, flex-shrink与flex-basis。

  • flex: 1 1 auto; 平均分配扩大和缩小剩余大小,auto按照原来大小

  • flex: 0 1 150px; 每个item的宽度最多是150px;只会因容器不足时缩小,而不会在有剩余空间的时候扩大。

  • flex: 0 0 200px; 固定每个flex item的宽度是200px,不扩大也不缩小

面试题 :flex:1什么意思?flex:1 0什么意思?(那你知道flex这个属性怎么来的吗?(知道:basis,shrink,grow),既然你知道是这三个合成的,那flex:1 0 什么意思?