flex布局

合集 - css属性学习(3)

1.css文本换行设置2023-12-202.backdrop-filter：为元素后面区域添加图形效果2023-12-20

3.flex布局2023-12-26

收起

目录

• 简介
• flex容器
  • 基本概念
  • flex-direction:决定主轴的方向(即元素的排列方向)
  • flex-wrap: 指定弹性盒子的子元素换行方式
  • justify-content：定义了元素在主轴的对齐方式
  • align-items:设置弹性盒子元素在交叉轴（与主轴垂直）方向上的对齐方式
  • align-content:用于修改 flex-wrap 属性的行为
• 弹性子元素
  • order
  • flex-basis
  • flex-grow
  • flex-shrink
  • flex
  • align-self

简介

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

flex容器

将任何一个容器设置为flex容器，这样容器内的元素都可以使用flex布局。

.container{
    display:flex | inline-flex;
}

基本概念

在flex容器中默认存在两条轴--------主轴和交叉轴，默认为水平主轴，垂直交叉轴，可以通过flex-direction修改。

flex-direction:决定主轴的方向(即元素的排列方向)

.container{
    flex-direction: row | row-reverse | column | column-reverse;
}

• 默认值：row，主轴为水平方向，起点在左端。
  

• row-reverse，主轴为水平方向，起点在右端
  

• column，主轴为垂直方向，起点在上面
  

• column-reverse：主轴为垂直方向，起点在下面
  

flex-wrap: 指定弹性盒子的子元素换行方式

.container{
    flex-wrap: nowrap|wrap|wrap-reverse;
}

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
  

• wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  

• wrap-reverse -反转 wrap 排列。
  

justify-content：定义了元素在主轴的对齐方式

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start：子元素向主轴start边界紧挨着填充。这个是默认值。
  

• flex-end：子元素向主轴end边界紧挨着填充。
  

• center：子元素居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
  

• space-between：子元素平均分布在该行上（第一个子元素与主轴start边界对齐，最后一个元素与主轴end边界对齐，剩余的弹性项分布在该行上，相邻项目的间隔相等。）。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。
  

• space-around：子元素平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
  

• space-evenly：子元素平均分布在该行上，但与space-around不同的是子元素之间的间隔是相同的，包括与容器的间隔
  

align-items:设置弹性盒子元素在交叉轴（与主轴垂直）方向上的对齐方式

.container {
    align-items:stretch | flex-start | flex-end | center | baseline;
}

• flex-start：子元素与向交叉轴的start边界对齐。默认值
  

• flex-end：子元素与向交叉轴的end边界对齐。
  

• center：子元素与交叉轴的中点对齐。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  

• baseline：与第一个元素内文字的基线对齐。
  

• stretch：如果子元素未指定交叉轴方向的大小属性值，则子元素交叉轴方向的大小会跟容器大小一致，但同时会遵照'min/max-width/height'属性的限制。如下，没有给子元素设置高度。
  

align-content:用于修改 flex-wrap 属性的行为

类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

.container{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch
}

• stretch - 默认。各行将会伸展以占用剩余的空间。
  

• flex-start - 各行向弹性盒容器的起始位置堆叠。
  

• flex-end - 各行向弹性盒容器的结束位置堆叠。
  

• center -各行向弹性盒容器的中间位置堆叠。
  

• space-between -各行在弹性盒容器中平均分布。
  

• space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
  

弹性子元素

order

定义子元素在容器中的排列顺序，数值越小，排列越靠前，默认值为 0

.item {
    order: <integer>;
}
//可以为负值

flex-basis

指定子元素在分配flex容器剩余空间之前占据主轴空间的大小。默认值auto

.item{
    flex-basis: auto | <length>;
	//<length>可以为百分比
}

如果主轴为水平方向，那么子元素的宽度会失效
如果主轴为垂直方向，那么子元素的高度会失效

例如，给每个子元素设置flex-basis:60px

还有剩余空间没有分配完，可以使用flex-grow来分配，例如：flex-grow:1，每个子元素会平均分配剩余空间

🔎子元素使用flex-basis:50%（即设置子元素占主轴空间的50%），父容器使用flex-wrap:wrap，让子元素两列等宽铺满容器

flex-grow

设置子元素在主轴方向上弹性延伸的比例。默认值为0

.item{
    flex-grow: <number>;
}

上图中，所有方块的flex-basis:50px，方块1flex-grow:4，其余方块flex-grow:1，flex容器宽度为500px，计算方块1的宽度：4*(50px + 1x) + 50px + 4x = 500px，解得x=31.25，所以方块1的宽度为50px +4*31.25px = 175px

flex-shrink

设置子元素缩小比例，默认值为1，即容器剩余空间不足时，该子元素将缩小。为0即该子元素不缩小

.item{
    //负值无效
    flex-shrink: <number>;
}

上图中，所有方块的flex-basis:200px;flex-shrink: 2;，flex容器宽度为500px，设置flex-shrink:0;的话子元素会溢出（所有子元素加起来有1000px）

计算每个方块缩小后的宽度：

1. 1000px - 5 * 2x = 500px，x=50px，即每个元素缩小2x = 2*50px = 100px
2. 200px - 2 * 50px = 100px，即每个子元素缩小后的宽度为100px

flex

flex-grow, flex-shrink 和 flex-basis的简写

.item{
   flex: none | flex-grow flex-shrink flex-basis
}

快捷值：auto(1 1 auto)和none(0 0 auto)

flex:1 auto
/*
等价于
flex-grow:1;
flex-shrink:1;
flex-basis:auto;
*/

align-self

设置子元素自身在交叉轴方向上的对齐方式，默认值为auto（会继承父元素的align-items）

.item{
    align-self: auto | flex-start | flex-end | center | stretch
}

align-items是定义在父容器样式上的，align-self是定义在子元素样式上的

参考文章：

• Flex 布局详解 - 知乎 (zhihu.com)

• CSS3 多媒体查询 | 菜鸟教程 (runoob.com)