CSS学习笔记（六）

发表于 更新于 分类于 ， 阅读次数： 本文字数： 5.8k 阅读时长 ≈ 5 分钟
用在flex-container上的属性,用在flex-items上的属性,水平垂直居中布局总结

用在flex-container上的属性

main axis：主轴

main start

main end

cross axis：交叉轴

cross start

cross end

flex-direction

设置主轴的方向

可取的值：

  • row（默认）行
  • row-reverse（行反转）
  • column（列）
  • column-reverse（列反转）

flex-wrap

决定flex-item是否换行

可取的值：

  • nowrap（默认）单行
  • wrap（多行）
  • wrap-reverse（多行，对比wrap，从父盒子的底部开始排列）

当父盒子设置了固定的宽，子盒子也设置了固定的宽，如果所有子盒子的宽度和<父盒子的宽度

如果flex-wrap取值为nowrap（不换行），则子盒子的宽度会被压缩，被挤在父盒子的第一层

即：元素最终展示出来的宽度和width有关系,但是没有必然性

这就引出了一个问题，如果子盒子的宽度和 < 父盒子，为什么子盒子没有被拉伸?

这就和“flex-grow”属性有关了 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
  }

  .box .item {
    width: 500px;
    background-color: pink;
    text-align: center;
  }
</style>
<div class="box">
  <div class="item">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

flex-flow

flex-direction和flex-wrap的简写属性

顺序任何，并且可以省略

justify-content

决定flex-item在主轴的排列方式

可取的值：

  • space-between（flex-items之间距离相等，同时main start，main end两端对齐）
  • space-around（flex-items之间距离相等，flex-items与main start和main end的距离是flex-items之间距离的一半）
  • space-evenly（flex-items之间距离相等，flex-items与main start和main end的距离等于flex-items之间距离）
  • flex-start（main start开始排列）
  • flex-end（main end开始排列）
  • center（居中）

justify-content呈现

align-items

决定flex-items在交叉轴的对齐方式（单行）

可取的值：

  • normal:在弹性布局中，效果和stretch一样
  • stretch: 当flex items在交叉轴方向的高度或者宽度为auto 时，会自动拉伸至填充flex container；如果设置了具体值，该属性无效；
  • flex-start: 与cross start对齐
  • flex-end: 与cross end对齐
  • center:居中对齐
  • baseline:与基准线对齐

align-items

align-content

align-content决定了多行flex items在交叉轴的对齐方式，用法与justify-content类似

  • stretch(默认值):与align-items的stretch类似
  • flex-start: 与cross start对齐
  • flex-end: 与cross end对齐
  • center:居中对齐
  • space-between:
    • flex items 之间的距离相等
    • 与cross start、cross end两端对齐
  • space-around:
    • flex items之间的距离相等
    • flex items 与cross start、cross end之间的距离是flex items之间距离的一半
  • space-evenly:
    • flex items之间的距离相等
    • flex items与cross start、cross end 之间的距离等于flex items之间的距离

align-content呈现

用在flex-items上的属性

order

决定items的排布顺序，数字越小越优先排布，反正越靠后排布

默认为0

align-self

在父盒子确定flex-items排布的情况下，这个属性决定flex-items自身在父盒子交叉轴中的排布方式

也可理解为：该属性会覆盖align-items的值

可取的值：

  • auto（遵从align-items的设置）

  • stretch（flex-items在交叉轴方向的高度或者宽度未设置的情况下，会拉伸）

  • center

  • flex-start

  • flex-end

  • baseline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
  .box {
    width: 500px;
    height: 500px;
    background-color: pink;
    display: flex;
    justify-content: space-between;

  }

  .box .item {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .item.item2 {
    align-self: center;
  }

  .item.item3 {
    align-self: flex-end;
  }
</style>
<div class="box">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

flex-grow

flex-grow决定了flex items 如何扩展(拉伸/成长)；

可以设置任意非负数字(正小数、正整数、0)，默认值是0，如果子盒子没有设置宽度，则宽度是包裹内容的宽度，否则是设置的宽度。
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效

注意：扩展后的宽度不能超过max-width/height

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 将父盒子的剩余宽度分配给item2 */
<style>
  .box {
    width: 500px;
    height: 500px;
    background-color: pink;
    display: flex;
    justify-content: space-between;

  }

  .box .item {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .item.item2 {
    flex-grow: 1;
    background-color: blue;
  }

  .item.item3 {
    align-self: flex-end;
  }
</style>
<div class="box">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 将剩余宽度平均分配给flex items */
<style>
  .box {
    width: 500px;
    height: 500px;
    background-color: pink;
    display: flex;
    justify-content: space-between;

  }

  .box .item {
    width: 100px;
    height: 100px;
    background-color: red;
    flex-grow: 1;
  }

  .item.item2 {
    background-color: blue;
  }
</style>
<div class="box">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 将剩余宽度分为四份，两份给item2,另外两份分别给item1和item3 */
<style>
  .box {
    width: 500px;
    height: 500px;
    background-color: pink;
    display: flex;
    justify-content: space-between;

  }

  .box .item {
    width: 100px;
    height: 100px;
    background-color: red;
    flex-grow: 1;
  }

  .item.item2 {
    flex-grow: 2;
    background-color: blue;
  }
</style>
<div class="box">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

flex-shrink

是flex-grow的反向操作

决定flex items如何压缩

默认会压缩（即默认值1，0表示不压缩）

注意：压缩后的值不能小于min-width/s

flex-basis（不常用）

用于设置flex items在主轴的基础尺寸

默认值为auto，也可以取具体的数值

决定flex item最终的尺寸的优先级：

  • max-width\max-height\min-width\min-height
  • flex-basis
  • width/height
  • 内容本身的size

flex

flex-grow || flex-shrink |l flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

单值语法:

值必须为以下其中之一:

一个无单位数():它会被当作的值。

一个有效的宽度(width)值:它会被当作 的值。关键字none，auto或initial.

双值语法:

第一个值必须为一个无单位数，并且它会被当作的值。

第二个值必须为以下之—:

一个无单位数:它会被当作的值。

一个有效的宽度值:它会被当作的值。

水平垂直居中总结

水平居中

  • 行内级元素：text-align:center
  • 块级元素：margin:0 auto
  • 决定定位的元素：该元素有宽度，设置其css样式为：
1
2
3
4
5
6
7
8
9
<style>
    selector{
        width:100px;
        position: absolute;
        left: 0;
        right 0;
        margin: 0 auto;
    }
</style>
  • flex布局：justify-content: center

垂直居中

  • 绝对定位，该元素有高度，设置其css样式为:

1
2
3
4
5
6
7
8
9
<style>
    selector{
        position: absolute;
    	height:100px;
        top: 0;
        bottom: 0;
        margin: auto 0;
	}
</style>
  • flex布局：align-items:center
  • transform&&top

注：transform值如果取百分比，相对于的宽度或者高度是自身宽度或者高度的百分比。

1
2
3
4
5
6
7
8
<style>
    selector{
        height:100px;
		position:relative;
        transform:translate(0, -50%);
        top:50%;
    }
</style>

水平垂直居中使用定位的弊端

  • 必须使用定位，脱离了标准流；
  • 必须给元素设置宽或者高，如果不设置宽和高，则该元素的宽高会被拉伸成父元素（包含块）盒子的宽度或者高度；

flex水平垂直居中的弊端

  • flex盒子内所有的盒子都会被垂直或者水平居中，无法针对特定的子元素盒子（虽然可以使用align-self来解决，但是在子元素非常多的情况下，不见得很方便）；
  • 相对来说，有兼容性问题（基本可以忽略）。